carbon-components-angular 5.9.2 → 5.10.1

package/docs/documentation.json

@@ -569,12 +569,12 @@
         },
         {
             "name": "ExpandableTileTranslations",
-            "id": "interface-ExpandableTileTranslations-0b5eaa2a124b0bd17cfb8fa8982fefe4bbe04929bf24a1fe5659e3d70b82c50938e1d8cbb97a9526751ae1e2d416b7db3324cf2fd97b1c1229d8ab7276831b20",
+            "id": "interface-ExpandableTileTranslations-3bea5aa8a6f48228e64b1a305bec0cef5bcd6f09e5230d92f29c79ac251257c2faa478eef8e6bee2d6aea3e53ca2d4a9e924f83c6099bbeb6ef24f2210226a63",
             "file": "src/tiles/expandable-tile.component.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tElementRef,\n\tAfterContentInit\n} from \"@angular/core\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface ExpandableTileTranslations {\n\tEXPAND: string;\n\tCOLLAPSE: string;\n}\n\n@Component({\n\tselector: \"cds-expandable-tile, ibm-expandable-tile\",\n\ttemplate: `\n\t\t<button\n\t\t\tclass=\"cds--tile cds--tile--expandable\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tile--is-expanded' : expanded,\n\t\t\t\t'cds--tile--light': theme === 'light'\n\t\t\t}\"\n\t\t\t[ngStyle]=\"{'max-height': expandedHeight + 'px'}\"\n\t\t\ttype=\"button\"\n\t\t\t(click)=\"onClick()\">\n\t\t\t<div class=\"cds--tile__chevron\">\n\t\t\t\t<svg *ngIf=\"!expanded\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" [attr.title]=\"expand.subject | async\" role=\"img\">\n\t\t\t\t\t<title>{{expand.subject | async}}</title>\n\t\t\t\t\t<path fill-rule=\"nonzero\" d=\"M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z\"/>\n\t\t\t\t</svg>\n\t\t\t\t<svg *ngIf=\"expanded\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" [attr.title]=\"collapse.subject | async\" role=\"img\">\n\t\t\t\t\t<title>{{collapse.subject | async}}</title>\n\t\t\t\t\t<path fill-rule=\"nonzero\" d=\"M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z\"/>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<div class=\"cds--tile-content\">\n\t\t\t\t<ng-content select=\".cds--tile-content__above-the-fold\"></ng-content>\n\t\t\t\t<ng-content select=\".cds--tile-content__below-the-fold\"></ng-content>\n\t\t\t</div>\n\t\t</button>\n\t`\n})\nexport class ExpandableTile implements AfterContentInit {\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() expanded = false;\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"EXPAND\": \"Expand\",\n\t *\t\t\"COLLAPSE\": \"Collapse\",\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value: ExpandableTileTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"TILES\"), value);\n\t\tthis.expand.override(valueWithDefaults.EXPAND);\n\t\tthis.collapse.override(valueWithDefaults.COLLAPSE);\n\t}\n\n\ttileMaxHeight = 0;\n\tcurrentExpandedHeight = 0;\n\telement = this.elementRef.nativeElement;\n\n\texpand = this.i18n.getOverridable(\"TILES.EXPAND\");\n\tcollapse = this.i18n.getOverridable(\"TILES.COLLAPSE\");\n\n\tconstructor(protected i18n: I18n, protected elementRef: ElementRef) {}\n\n\tngAfterContentInit() {\n\t\tthis.updateMaxHeight();\n\t}\n\n\tget expandedHeight() {\n\t\tconst tile = this.element.querySelector(\".cds--tile\");\n\t\tconst tilePadding\n\t\t\t= parseInt(getComputedStyle(tile).paddingBottom, 10) + parseInt(getComputedStyle(tile).paddingTop, 10);\n\t\tconst expandedHeight = this.tileMaxHeight + tilePadding;\n\t\tif (!isNaN(expandedHeight)) {\n\t\t\tthis.currentExpandedHeight = expandedHeight;\n\t\t}\n\t\treturn this.currentExpandedHeight;\n\t}\n\n\tupdateMaxHeight() {\n\t\tif (this.expanded) {\n\t\t\tthis.tileMaxHeight = this.element.querySelector(\".cds--tile-content\").getBoundingClientRect().height;\n\t\t} else {\n\t\t\tthis.tileMaxHeight = this.element.querySelector(\".cds--tile-content__above-the-fold\").getBoundingClientRect().height;\n\t\t}\n\t}\n\n\tonClick() {\n\t\tthis.expanded = !this.expanded;\n\t\tthis.updateMaxHeight();\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tElementRef,\n\tAfterViewInit,\n\tViewChild\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface ExpandableTileTranslations {\n\tEXPAND: string;\n\tCOLLAPSE: string;\n}\n\n@Component({\n\tselector: \"cds-expandable-tile, ibm-expandable-tile\",\n\ttemplate: `\n\t\t<button\n\t\t\t*ngIf=\"!interactive\"\n\t\t\tclass=\"cds--tile cds--tile--expandable\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tile--is-expanded' : expanded,\n\t\t\t\t'cds--tile--light': theme === 'light'\n\t\t\t}\"\n\t\t\t[ngStyle]=\"{'max-height': expandedHeight + 'px'}\"\n\t\t\ttype=\"button\"\n\t\t\t(click)=\"onClick()\"\n\t\t\t[attr.aria-expanded]=\"expanded\"\n\t\t\t[attr.title]=\"(expanded ? collapse.subject : expand.subject) | async\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"expandableTileContent\"></ng-container>\n\t\t</button>\n\n\t\t<div\n\t\t\t*ngIf=\"interactive\"\n\t\t\tclass=\"cds--tile cds--tile--expandable cds--tile--expandable--interactive\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tile--is-expanded' : expanded,\n\t\t\t\t'cds--tile--light': theme === 'light'\n\t\t\t}\"\n\t\t\t[ngStyle]=\"{'max-height': expandedHeight + 'px'}\"\n\t\t\t[attr.title]=\"(expanded ? collapse.subject : expand.subject) | async\">\n\t\t\t<ng-container *ngTemplateOutlet=\"expandableTileContent\"></ng-container>\n\t\t</div>\n\n\t\t<ng-template #chevronIcon>\n\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t</ng-template>\n\n\t\t<ng-template #expandableTileContent>\n\t\t\t<div #container>\n\t\t\t\t<div class=\"cds--tile-content\">\n\t\t\t\t\t<ng-content select=\"[cdsAboveFold],[ibmAboveFold],.cds--tile-content__above-the-fold\"></ng-content>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!interactive\" class=\"cds--tile__chevron\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"chevronIcon\"></ng-container>\n\t\t\t\t</div>\n\t\t\t\t<button\n\t\t\t\t\t*ngIf=\"interactive\"\n\t\t\t\t\tclass=\"cds--tile__chevron cds--tile__chevron--interactive\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t(click)=\"onClick()\"\n\t\t\t\t\t[attr.aria-expanded]=\"expanded\"\n\t\t\t\t\t[attr.aria-label]=\"(expanded ? collapse.subject : expand.subject) | async\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"chevronIcon\"></ng-container>\n\t\t\t\t</button>\n\t\t\t\t<div class=\"cds--tile-content\">\n\t\t\t\t\t<ng-content select=\"[cdsBelowFold],[ibmBelowFold],.cds--tile-content__below-the-fold\"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-template>\n\t`\n})\nexport class ExpandableTile implements AfterViewInit {\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Controls the expanded state\n\t */\n\t@Input() expanded = false;\n\t/**\n\t * Controls the interactive state\n\t */\n\t@Input() interactive = false;\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"EXPAND\": \"Expand\",\n\t *\t\t\"COLLAPSE\": \"Collapse\",\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value: ExpandableTileTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"TILES\"), value);\n\t\tthis.expand.override(valueWithDefaults.EXPAND);\n\t\tthis.collapse.override(valueWithDefaults.COLLAPSE);\n\t}\n\n\t@ViewChild(\"container\") tileContainer: ElementRef;\n\n\ttileMaxHeight = 0;\n\tcurrentExpandedHeight = 0;\n\n\texpand = this.i18n.getOverridable(\"TILES.EXPAND\");\n\tcollapse = this.i18n.getOverridable(\"TILES.COLLAPSE\");\n\n\tconstructor(protected i18n: I18n, protected element: ElementRef) {}\n\n\tngAfterViewInit() {\n\t\tthis.updateMaxHeight();\n\t}\n\n\tget expandedHeight() {\n\t\tconst tile = this.element.nativeElement.querySelector(\".cds--tile\");\n\t\tconst tilePadding\n\t\t\t= parseInt(getComputedStyle(tile).paddingBottom, 10) + parseInt(getComputedStyle(tile).paddingTop, 10);\n\t\tconst expandedHeight = this.tileMaxHeight + tilePadding;\n\t\tif (!isNaN(expandedHeight)) {\n\t\t\tthis.currentExpandedHeight = expandedHeight;\n\t\t}\n\t\treturn this.currentExpandedHeight;\n\t}\n\n\tupdateMaxHeight() {\n\t\tif (this.expanded) {\n\t\t\tthis.tileMaxHeight = this.tileContainer.nativeElement.getBoundingClientRect().height;\n\t\t} else {\n\t\t\tthis.tileMaxHeight = this.element.nativeElement.querySelector(\".cds--tile-content__above-the-fold\").getBoundingClientRect().height;\n\t\t}\n\t}\n\n\tonClick() {\n\t\tthis.expanded = !this.expanded;\n\t\tthis.updateMaxHeight();\n\t}\n}\n",
             "properties": [
                 {
                     "name": "COLLAPSE",
@@ -583,7 +583,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 12
+                    "line": 13
                 },
                 {
                     "name": "EXPAND",
@@ -592,7 +592,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 11
+                    "line": 12
                 }
             ],
             "indexSignatures": [],
@@ -11908,6 +11908,108 @@
                 }
             }
         },
+        {
+            "name": "ExpandableTileAboveFoldDirective",
+            "id": "directive-ExpandableTileAboveFoldDirective-76488cf603d86a274d230956261957c5ade24f39fe79710271ef84172215ad9b4fcbd290e42a8ff0a04c927bd994b9a2d3531af6f42737a692c9d21f090a0c47",
+            "file": "src/tiles/expandable-tile-above.directive.ts",
+            "type": "directive",
+            "description": "",
+            "rawdescription": "\n",
+            "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsAboveFold], [ibmAboveFold]\"\n})\nexport class ExpandableTileAboveFoldDirective {\n\t@HostBinding(\"class.cds--tile-content__above-the-fold\") aboveFold = true;\n}\n",
+            "selector": "[cdsAboveFold], [ibmAboveFold]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [
+                {
+                    "name": "class.cds--tile-content__above-the-fold",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 7,
+                    "type": "boolean",
+                    "decorators": []
+                }
+            ],
+            "hostListeners": [],
+            "propertiesClass": [
+                {
+                    "name": "aboveFold",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 7,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'class.cds--tile-content__above-the-fold'"
+                        }
+                    ],
+                    "modifierKind": [
+                        167
+                    ]
+                }
+            ],
+            "methodsClass": []
+        },
+        {
+            "name": "ExpandableTileBelowFoldDirective",
+            "id": "directive-ExpandableTileBelowFoldDirective-81506a53ba66ad095f5c4cb4df7affed7fe9043b071b744e8949d287403b6c804ff161e77d551327bccfb6604accd20f1667b46b8e4cbb7b02f1dc9a14ec86b2",
+            "file": "src/tiles/expandable-tile-below.directive.ts",
+            "type": "directive",
+            "description": "",
+            "rawdescription": "\n",
+            "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsBelowFold], [ibmBelowFold]\"\n})\nexport class ExpandableTileBelowFoldDirective {\n\t@HostBinding(\"class.cds--tile-content__below-the-fold\") belowFold = true;\n}\n",
+            "selector": "[cdsBelowFold], [ibmBelowFold]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [
+                {
+                    "name": "class.cds--tile-content__below-the-fold",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 7,
+                    "type": "boolean",
+                    "decorators": []
+                }
+            ],
+            "hostListeners": [],
+            "propertiesClass": [
+                {
+                    "name": "belowFold",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 7,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'class.cds--tile-content__below-the-fold'"
+                        }
+                    ],
+                    "modifierKind": [
+                        167
+                    ]
+                }
+            ],
+            "methodsClass": []
+        },
         {
             "name": "ExpandedRowHover",
             "id": "directive-ExpandedRowHover-6c74402214f5db85133454ab0679f5aaf513b970abac4baf4355258b3a0853ac623287e099bed45dc35a51bbc957f278da8dae9167fda32e0b31f1b5582cb1bf",
@@ -28547,7 +28649,7 @@
         },
         {
             "name": "ExpandableTile",
-            "id": "component-ExpandableTile-0b5eaa2a124b0bd17cfb8fa8982fefe4bbe04929bf24a1fe5659e3d70b82c50938e1d8cbb97a9526751ae1e2d416b7db3324cf2fd97b1c1229d8ab7276831b20",
+            "id": "component-ExpandableTile-3bea5aa8a6f48228e64b1a305bec0cef5bcd6f09e5230d92f29c79ac251257c2faa478eef8e6bee2d6aea3e53ca2d4a9e924f83c6099bbeb6ef24f2210226a63",
             "file": "src/tiles/expandable-tile.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -28557,7 +28659,7 @@
             "selector": "cds-expandable-tile, ibm-expandable-tile",
             "styleUrls": [],
             "styles": [],
-            "template": "<button\n\tclass=\"cds--tile cds--tile--expandable\"\n\t[ngClass]=\"{\n\t\t'cds--tile--is-expanded' : expanded,\n\t\t'cds--tile--light': theme === 'light'\n\t}\"\n\t[ngStyle]=\"{'max-height': expandedHeight + 'px'}\"\n\ttype=\"button\"\n\t(click)=\"onClick()\">\n\t<div class=\"cds--tile__chevron\">\n\t\t<svg *ngIf=\"!expanded\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" [attr.title]=\"expand.subject | async\" role=\"img\">\n\t\t\t<title>{{expand.subject | async}}</title>\n\t\t\t<path fill-rule=\"nonzero\" d=\"M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z\"/>\n\t\t</svg>\n\t\t<svg *ngIf=\"expanded\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" [attr.title]=\"collapse.subject | async\" role=\"img\">\n\t\t\t<title>{{collapse.subject | async}}</title>\n\t\t\t<path fill-rule=\"nonzero\" d=\"M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z\"/>\n\t\t</svg>\n\t</div>\n\t<div class=\"cds--tile-content\">\n\t\t<ng-content select=\".cds--tile-content__above-the-fold\"></ng-content>\n\t\t<ng-content select=\".cds--tile-content__below-the-fold\"></ng-content>\n\t</div>\n</button>\n\t",
+            "template": "<button\n\t*ngIf=\"!interactive\"\n\tclass=\"cds--tile cds--tile--expandable\"\n\t[ngClass]=\"{\n\t\t'cds--tile--is-expanded' : expanded,\n\t\t'cds--tile--light': theme === 'light'\n\t}\"\n\t[ngStyle]=\"{'max-height': expandedHeight + 'px'}\"\n\ttype=\"button\"\n\t(click)=\"onClick()\"\n\t[attr.aria-expanded]=\"expanded\"\n\t[attr.title]=\"(expanded ? collapse.subject : expand.subject) | async\">\n\t\t<ng-container *ngTemplateOutlet=\"expandableTileContent\"></ng-container>\n</button>\n\n<div\n\t*ngIf=\"interactive\"\n\tclass=\"cds--tile cds--tile--expandable cds--tile--expandable--interactive\"\n\t[ngClass]=\"{\n\t\t'cds--tile--is-expanded' : expanded,\n\t\t'cds--tile--light': theme === 'light'\n\t}\"\n\t[ngStyle]=\"{'max-height': expandedHeight + 'px'}\"\n\t[attr.title]=\"(expanded ? collapse.subject : expand.subject) | async\">\n\t<ng-container *ngTemplateOutlet=\"expandableTileContent\"></ng-container>\n</div>\n\n<ng-template #chevronIcon>\n\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n</ng-template>\n\n<ng-template #expandableTileContent>\n\t<div #container>\n\t\t<div class=\"cds--tile-content\">\n\t\t\t<ng-content select=\"[cdsAboveFold],[ibmAboveFold],.cds--tile-content__above-the-fold\"></ng-content>\n\t\t</div>\n\t\t<div *ngIf=\"!interactive\" class=\"cds--tile__chevron\">\n\t\t\t<ng-container *ngTemplateOutlet=\"chevronIcon\"></ng-container>\n\t\t</div>\n\t\t<button\n\t\t\t*ngIf=\"interactive\"\n\t\t\tclass=\"cds--tile__chevron cds--tile__chevron--interactive\"\n\t\t\ttype=\"button\"\n\t\t\t(click)=\"onClick()\"\n\t\t\t[attr.aria-expanded]=\"expanded\"\n\t\t\t[attr.aria-label]=\"(expanded ? collapse.subject : expand.subject) | async\">\n\t\t\t<ng-container *ngTemplateOutlet=\"chevronIcon\"></ng-container>\n\t\t</button>\n\t\t<div class=\"cds--tile-content\">\n\t\t\t<ng-content select=\"[cdsBelowFold],[ibmBelowFold],.cds--tile-content__below-the-fold\"></ng-content>\n\t\t</div>\n\t</div>\n</ng-template>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -28567,7 +28669,20 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 51,
+                    "rawdescription": "\n\nControls the expanded state\n",
+                    "description": "<p>Controls the expanded state</p>\n",
+                    "line": 84,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "interactive",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nControls the interactive state\n",
+                    "description": "<p>Controls the interactive state</p>\n",
+                    "line": 88,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -28578,15 +28693,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\nSet to `\"light\"` to apply the light style",
                     "jsdoctags": [
                         {
-                            "pos": 1483,
-                            "end": 1587,
+                            "pos": 2306,
+                            "end": 2410,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 1484,
-                                "end": 1494,
+                                "pos": 2307,
+                                "end": 2317,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -28596,7 +28711,7 @@
                             "comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\nSet to <code>&quot;light&quot;</code> to apply the light style</p>\n"
                         }
                     ],
-                    "line": 49,
+                    "line": 79,
                     "type": "\"light\" | \"dark\"",
                     "decorators": []
                 },
@@ -28606,7 +28721,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"EXPAND\": \"Expand\",\n\t\t\"COLLAPSE\": \"Collapse\",\n}\n```\n",
                     "description": "<p>Expects an object that contains some or all of:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-none\">{\n        &quot;EXPAND&quot;: &quot;Expand&quot;,\n        &quot;COLLAPSE&quot;: &quot;Collapse&quot;,\n}</code></pre></div>",
-                    "line": 62,
+                    "line": 99,
                     "type": "ExpandableTileTranslations",
                     "decorators": []
                 }
@@ -28621,7 +28736,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 73
+                    "line": 111
                 },
                 {
                     "name": "currentExpandedHeight",
@@ -28631,27 +28746,35 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 69
+                    "line": 108
                 },
                 {
-                    "name": "element",
-                    "defaultValue": "this.elementRef.nativeElement",
+                    "name": "expand",
+                    "defaultValue": "this.i18n.getOverridable(\"TILES.EXPAND\")",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 70
+                    "line": 110
                 },
                 {
-                    "name": "expand",
-                    "defaultValue": "this.i18n.getOverridable(\"TILES.EXPAND\")",
+                    "name": "tileContainer",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "",
+                    "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 72
+                    "line": 105,
+                    "decorators": [
+                        {
+                            "name": "ViewChild",
+                            "stringifiedArguments": "'container'"
+                        }
+                    ],
+                    "modifierKind": [
+                        167
+                    ]
                 },
                 {
                     "name": "tileMaxHeight",
@@ -28661,7 +28784,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 68
+                    "line": 107
                 }
             ],
             "methodsClass": [
@@ -28671,7 +28794,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 100,
+                    "line": 138,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -28681,7 +28804,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 92,
+                    "line": 130,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -28695,7 +28818,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tElementRef,\n\tAfterContentInit\n} from \"@angular/core\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface ExpandableTileTranslations {\n\tEXPAND: string;\n\tCOLLAPSE: string;\n}\n\n@Component({\n\tselector: \"cds-expandable-tile, ibm-expandable-tile\",\n\ttemplate: `\n\t\t<button\n\t\t\tclass=\"cds--tile cds--tile--expandable\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tile--is-expanded' : expanded,\n\t\t\t\t'cds--tile--light': theme === 'light'\n\t\t\t}\"\n\t\t\t[ngStyle]=\"{'max-height': expandedHeight + 'px'}\"\n\t\t\ttype=\"button\"\n\t\t\t(click)=\"onClick()\">\n\t\t\t<div class=\"cds--tile__chevron\">\n\t\t\t\t<svg *ngIf=\"!expanded\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" [attr.title]=\"expand.subject | async\" role=\"img\">\n\t\t\t\t\t<title>{{expand.subject | async}}</title>\n\t\t\t\t\t<path fill-rule=\"nonzero\" d=\"M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z\"/>\n\t\t\t\t</svg>\n\t\t\t\t<svg *ngIf=\"expanded\" width=\"12\" height=\"7\" viewBox=\"0 0 12 7\" [attr.title]=\"collapse.subject | async\" role=\"img\">\n\t\t\t\t\t<title>{{collapse.subject | async}}</title>\n\t\t\t\t\t<path fill-rule=\"nonzero\" d=\"M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z\"/>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<div class=\"cds--tile-content\">\n\t\t\t\t<ng-content select=\".cds--tile-content__above-the-fold\"></ng-content>\n\t\t\t\t<ng-content select=\".cds--tile-content__below-the-fold\"></ng-content>\n\t\t\t</div>\n\t\t</button>\n\t`\n})\nexport class ExpandableTile implements AfterContentInit {\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() expanded = false;\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"EXPAND\": \"Expand\",\n\t *\t\t\"COLLAPSE\": \"Collapse\",\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value: ExpandableTileTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"TILES\"), value);\n\t\tthis.expand.override(valueWithDefaults.EXPAND);\n\t\tthis.collapse.override(valueWithDefaults.COLLAPSE);\n\t}\n\n\ttileMaxHeight = 0;\n\tcurrentExpandedHeight = 0;\n\telement = this.elementRef.nativeElement;\n\n\texpand = this.i18n.getOverridable(\"TILES.EXPAND\");\n\tcollapse = this.i18n.getOverridable(\"TILES.COLLAPSE\");\n\n\tconstructor(protected i18n: I18n, protected elementRef: ElementRef) {}\n\n\tngAfterContentInit() {\n\t\tthis.updateMaxHeight();\n\t}\n\n\tget expandedHeight() {\n\t\tconst tile = this.element.querySelector(\".cds--tile\");\n\t\tconst tilePadding\n\t\t\t= parseInt(getComputedStyle(tile).paddingBottom, 10) + parseInt(getComputedStyle(tile).paddingTop, 10);\n\t\tconst expandedHeight = this.tileMaxHeight + tilePadding;\n\t\tif (!isNaN(expandedHeight)) {\n\t\t\tthis.currentExpandedHeight = expandedHeight;\n\t\t}\n\t\treturn this.currentExpandedHeight;\n\t}\n\n\tupdateMaxHeight() {\n\t\tif (this.expanded) {\n\t\t\tthis.tileMaxHeight = this.element.querySelector(\".cds--tile-content\").getBoundingClientRect().height;\n\t\t} else {\n\t\t\tthis.tileMaxHeight = this.element.querySelector(\".cds--tile-content__above-the-fold\").getBoundingClientRect().height;\n\t\t}\n\t}\n\n\tonClick() {\n\t\tthis.expanded = !this.expanded;\n\t\tthis.updateMaxHeight();\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tElementRef,\n\tAfterViewInit,\n\tViewChild\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface ExpandableTileTranslations {\n\tEXPAND: string;\n\tCOLLAPSE: string;\n}\n\n@Component({\n\tselector: \"cds-expandable-tile, ibm-expandable-tile\",\n\ttemplate: `\n\t\t<button\n\t\t\t*ngIf=\"!interactive\"\n\t\t\tclass=\"cds--tile cds--tile--expandable\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tile--is-expanded' : expanded,\n\t\t\t\t'cds--tile--light': theme === 'light'\n\t\t\t}\"\n\t\t\t[ngStyle]=\"{'max-height': expandedHeight + 'px'}\"\n\t\t\ttype=\"button\"\n\t\t\t(click)=\"onClick()\"\n\t\t\t[attr.aria-expanded]=\"expanded\"\n\t\t\t[attr.title]=\"(expanded ? collapse.subject : expand.subject) | async\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"expandableTileContent\"></ng-container>\n\t\t</button>\n\n\t\t<div\n\t\t\t*ngIf=\"interactive\"\n\t\t\tclass=\"cds--tile cds--tile--expandable cds--tile--expandable--interactive\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--tile--is-expanded' : expanded,\n\t\t\t\t'cds--tile--light': theme === 'light'\n\t\t\t}\"\n\t\t\t[ngStyle]=\"{'max-height': expandedHeight + 'px'}\"\n\t\t\t[attr.title]=\"(expanded ? collapse.subject : expand.subject) | async\">\n\t\t\t<ng-container *ngTemplateOutlet=\"expandableTileContent\"></ng-container>\n\t\t</div>\n\n\t\t<ng-template #chevronIcon>\n\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t</ng-template>\n\n\t\t<ng-template #expandableTileContent>\n\t\t\t<div #container>\n\t\t\t\t<div class=\"cds--tile-content\">\n\t\t\t\t\t<ng-content select=\"[cdsAboveFold],[ibmAboveFold],.cds--tile-content__above-the-fold\"></ng-content>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!interactive\" class=\"cds--tile__chevron\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"chevronIcon\"></ng-container>\n\t\t\t\t</div>\n\t\t\t\t<button\n\t\t\t\t\t*ngIf=\"interactive\"\n\t\t\t\t\tclass=\"cds--tile__chevron cds--tile__chevron--interactive\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t(click)=\"onClick()\"\n\t\t\t\t\t[attr.aria-expanded]=\"expanded\"\n\t\t\t\t\t[attr.aria-label]=\"(expanded ? collapse.subject : expand.subject) | async\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"chevronIcon\"></ng-container>\n\t\t\t\t</button>\n\t\t\t\t<div class=\"cds--tile-content\">\n\t\t\t\t\t<ng-content select=\"[cdsBelowFold],[ibmBelowFold],.cds--tile-content__below-the-fold\"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-template>\n\t`\n})\nexport class ExpandableTile implements AfterViewInit {\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Controls the expanded state\n\t */\n\t@Input() expanded = false;\n\t/**\n\t * Controls the interactive state\n\t */\n\t@Input() interactive = false;\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"EXPAND\": \"Expand\",\n\t *\t\t\"COLLAPSE\": \"Collapse\",\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value: ExpandableTileTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"TILES\"), value);\n\t\tthis.expand.override(valueWithDefaults.EXPAND);\n\t\tthis.collapse.override(valueWithDefaults.COLLAPSE);\n\t}\n\n\t@ViewChild(\"container\") tileContainer: ElementRef;\n\n\ttileMaxHeight = 0;\n\tcurrentExpandedHeight = 0;\n\n\texpand = this.i18n.getOverridable(\"TILES.EXPAND\");\n\tcollapse = this.i18n.getOverridable(\"TILES.COLLAPSE\");\n\n\tconstructor(protected i18n: I18n, protected element: ElementRef) {}\n\n\tngAfterViewInit() {\n\t\tthis.updateMaxHeight();\n\t}\n\n\tget expandedHeight() {\n\t\tconst tile = this.element.nativeElement.querySelector(\".cds--tile\");\n\t\tconst tilePadding\n\t\t\t= parseInt(getComputedStyle(tile).paddingBottom, 10) + parseInt(getComputedStyle(tile).paddingTop, 10);\n\t\tconst expandedHeight = this.tileMaxHeight + tilePadding;\n\t\tif (!isNaN(expandedHeight)) {\n\t\t\tthis.currentExpandedHeight = expandedHeight;\n\t\t}\n\t\treturn this.currentExpandedHeight;\n\t}\n\n\tupdateMaxHeight() {\n\t\tif (this.expanded) {\n\t\t\tthis.tileMaxHeight = this.tileContainer.nativeElement.getBoundingClientRect().height;\n\t\t} else {\n\t\t\tthis.tileMaxHeight = this.element.nativeElement.querySelector(\".cds--tile-content__above-the-fold\").getBoundingClientRect().height;\n\t\t}\n\t}\n\n\tonClick() {\n\t\tthis.expanded = !this.expanded;\n\t\tthis.updateMaxHeight();\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -28712,13 +28835,13 @@
                         "deprecationMessage": ""
                     },
                     {
-                        "name": "elementRef",
+                        "name": "element",
                         "type": "ElementRef",
                         "deprecated": false,
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 73,
+                "line": 111,
                 "jsdoctags": [
                     {
                         "name": "i18n",
@@ -28730,7 +28853,7 @@
                         }
                     },
                     {
-                        "name": "elementRef",
+                        "name": "element",
                         "type": "ElementRef",
                         "deprecated": false,
                         "deprecationMessage": "",
@@ -28741,7 +28864,7 @@
                 ]
             },
             "implements": [
-                "AfterContentInit"
+                "AfterViewInit"
             ],
             "accessors": {
                 "translations": {
@@ -28760,7 +28883,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 62,
+                        "line": 99,
                         "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"EXPAND\": \"Expand\",\n\t\t\"COLLAPSE\": \"Collapse\",\n}\n```\n",
                         "description": "<p>Expects an object that contains some or all of:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-none\">{\n        &quot;EXPAND&quot;: &quot;Expand&quot;,\n        &quot;COLLAPSE&quot;: &quot;Collapse&quot;,\n}</code></pre></div>",
                         "jsdoctags": [
@@ -28782,7 +28905,7 @@
                         "name": "expandedHeight",
                         "type": "",
                         "returnType": "",
-                        "line": 81
+                        "line": 119
                     }
                 }
             }
@@ -41128,7 +41251,7 @@
         },
         {
             "name": "Radio",
-            "id": "component-Radio-b46eb45aeba1d607b1abfe948208d8d1412575b5f04d2154e8433e2cd71cb4386018927ca69c9955856589fc882d5416c3584d8f18d2eb0ec2ace241b86fabc5",
+            "id": "component-Radio-c8843624caafee7784002695d7c9e979bc0495b0e346d046ad569302a7e7448065485546a2b71d719a295a1c29cc1bb163df73988f28ab7b47da0d3b35fb3de2",
             "file": "src/radio/radio.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -41142,14 +41265,13 @@
             "selector": "cds-radio, ibm-radio",
             "styleUrls": [],
             "styles": [],
-            "template": "<input\n\t*ngIf=\"!skeleton\"\n\tclass=\"cds--radio-button\"\n\ttype=\"radio\"\n\t[checked]=\"checked\"\n\t[disabled]=\"disabled || disabledFromGroup\"\n\t[name]=\"name\"\n\t[id]=\"id\"\n\t[required]=\"required\"\n\t[value]=\"value\"\n\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t(change)=\"onChange($event)\"\n\t(click)=\"onClick($event)\">\n<div *ngIf=\"skeleton\" class=\"cds--radio-button cds--skeleton\"></div>\n<label\n\tclass=\"cds--radio-button__label\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t[ngClass]=\"{\n\t\t'cds--skeleton': skeleton\n\t}\"\n\t[for]=\"id\"\n\tid=\"label-{{id}}\">\n\t<span class=\"cds--radio-button__appearance\"></span>\n\t<ng-content></ng-content>\n</label>\n\t",
+            "template": "<input\n\t*ngIf=\"!skeleton\"\n\tclass=\"cds--radio-button\"\n\ttype=\"radio\"\n\t[checked]=\"checked\"\n\t[disabled]=\"disabled || disabledFromGroup\"\n\t[name]=\"name\"\n\t[id]=\"id\"\n\t[required]=\"required\"\n\t[attr.value]=\"value\"\n\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t(change)=\"onChange($event)\"\n\t(click)=\"onClick($event)\">\n<div *ngIf=\"skeleton\" class=\"cds--radio-button cds--skeleton\"></div>\n<label\n\tclass=\"cds--radio-button__label\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t[ngClass]=\"{\n\t\t'cds--skeleton': skeleton\n\t}\"\n\t[for]=\"id\"\n\tid=\"label-{{id}}\">\n\t<span class=\"cds--radio-button__appearance\"></span>\n\t<ng-content></ng-content>\n</label>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
             "inputsClass": [
                 {
                     "name": "ariaLabel",
-                    "defaultValue": "\"\"",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to set the `aria-label` attribute on the input label.\n",
@@ -41237,13 +41359,12 @@
                 },
                 {
                     "name": "value",
-                    "defaultValue": "\"\"",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe value of the `Radio`.\n",
                     "description": "<p>The value of the <code>Radio</code>.</p>\n",
                     "line": 98,
-                    "type": "string",
+                    "type": "any",
                     "decorators": []
                 }
             ],
@@ -41404,8 +41525,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3183,
-                                "end": 3185,
+                                "pos": 3186,
+                                "end": 3188,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -41424,8 +41545,8 @@
                                 }
                             ],
                             "tagName": {
-                                "pos": 3177,
-                                "end": 3182,
+                                "pos": 3180,
+                                "end": 3185,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -41492,7 +41613,7 @@
             "description": "<p>class: Radio (extends Checkbox)</p>\n<p>selector: <code>n-radio</code></p>\n<p>source: <code>src/forms/radio.component.ts</code></p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">    &lt;cds-radio [(ngModel)]=&quot;radioState&quot;&gt;Radio&lt;/cds-radio&gt;</code></pre></div><p>Also see: <a href=\"#cds-radio-group\"><code>RadioGroup</code></a></p>\n",
             "rawdescription": "\n\nclass: Radio (extends Checkbox)\n\nselector: `n-radio`\n\nsource: `src/forms/radio.component.ts`\n\n```html\n\t<cds-radio [(ngModel)]=\"radioState\">Radio</cds-radio>\n```\n\nAlso see: [`RadioGroup`](#cds-radio-group)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { RadioChange } from \"./radio-change.class\";\n\n/**\n * class: Radio (extends Checkbox)\n *\n * selector: `n-radio`\n *\n * source: `src/forms/radio.component.ts`\n *\n * ```html\n *\t<cds-radio [(ngModel)]=\"radioState\">Radio</cds-radio>\n * ```\n *\n * Also see: [`RadioGroup`](#cds-radio-group)\n */\n@Component({\n\tselector: \"cds-radio, ibm-radio\",\n\ttemplate: `\n\t\t<input\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\tclass=\"cds--radio-button\"\n\t\t\ttype=\"radio\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[disabled]=\"disabled || disabledFromGroup\"\n\t\t\t[name]=\"name\"\n\t\t\t[id]=\"id\"\n\t\t\t[required]=\"required\"\n\t\t\t[value]=\"value\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<div *ngIf=\"skeleton\" class=\"cds--radio-button cds--skeleton\"></div>\n\t\t<label\n\t\t\tclass=\"cds--radio-button__label\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\"\n\t\t\t[for]=\"id\"\n\t\t\tid=\"label-{{id}}\">\n\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t<ng-content></ng-content>\n\t\t</label>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Radio,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Radio {\n\t/**\n\t * Used to dynamically create unique ids for the `Radio`.\n\t */\n\tstatic radioCount = 0;\n\n\t@Input() checked = false;\n\n\t@Input() name = \"\";\n\n\t@Input() disabled = false;\n\n\t@Input() labelPlacement: \"right\" | \"left\" =  \"right\";\n\n\t@Input() set ariaLabelledby(value: string) {\n\t\tthis._labelledby = value;\n\t}\n\n\tget ariaLabelledby() {\n\t\tif (this._labelledby) {\n\t\t\treturn this._labelledby;\n\t\t}\n\t\treturn `label-${this.id}`;\n\t}\n\n\t/**\n\t * Used to set the `aria-label` attribute on the input label.\n\t */\n\t@Input() ariaLabel = \"\";\n\n\t/**\n\t * Sets the HTML required attribute\n\t */\n\t@Input() required = false;\n\t/**\n\t * The value of the `Radio`.\n\t */\n\t@Input() value = \"\";\n\t/**\n\t * Set to `true` for a loading table.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * The id for the `Radio`.\n\t */\n\t@Input() id = `radio-${Radio.radioCount++}`;\n\t/**\n\t * emits when the state of the radio changes\n\t */\n\t@Output() change = new EventEmitter<RadioChange>();\n\n\t@HostBinding(\"class.cds--radio-button-wrapper\") hostClass = true;\n\n\t@HostBinding(\"class.cds--radio-button-wrapper--label-left\") get labelLeft() {\n\t\treturn this.labelPlacement === \"left\";\n\t}\n\n\t/**\n\t * Reflects whether or not the input is disabled at `RadioGroup` level.\n\t */\n\tdisabledFromGroup = false;\n\n\tprotected _labelledby = \"\";\n\n\t/**\n\t * Handler provided by the `RadioGroup` to bubble events up\n\t */\n\tradioChangeHandler = (event: RadioChange) => {};\n\n\t/**\n\t * Synchronizes with the `RadioGroup` in the event of a changed `Radio`.\n\t * Emits the changes of both the `RadioGroup` and `Radio`.\n\t */\n\tonChange(event: Event) {\n\t\tevent.stopPropagation();\n\t}\n\n\tonClick(event: Event) {\n\t\tthis.checked = (event.target as HTMLInputElement).checked;\n\t\tconst radioEvent = new RadioChange(this, this.value);\n\t\tthis.change.emit(radioEvent);\n\t\tthis.radioChangeHandler(radioEvent);\n\t}\n\n\t/**\n\t * Method called by `RadioGroup` with a callback function to bubble `RadioChange` events\n\t * @param fn callback that expects a `RadioChange` as an argument\n\t */\n\tregisterRadioChangeHandler(fn: (event: RadioChange) => void) {\n\t\tthis.radioChangeHandler = fn;\n\t}\n\n\tsetDisabledFromGroup(disabled: boolean) {\n\t\tthis.disabledFromGroup = disabled;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { RadioChange } from \"./radio-change.class\";\n\n/**\n * class: Radio (extends Checkbox)\n *\n * selector: `n-radio`\n *\n * source: `src/forms/radio.component.ts`\n *\n * ```html\n *\t<cds-radio [(ngModel)]=\"radioState\">Radio</cds-radio>\n * ```\n *\n * Also see: [`RadioGroup`](#cds-radio-group)\n */\n@Component({\n\tselector: \"cds-radio, ibm-radio\",\n\ttemplate: `\n\t\t<input\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\tclass=\"cds--radio-button\"\n\t\t\ttype=\"radio\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[disabled]=\"disabled || disabledFromGroup\"\n\t\t\t[name]=\"name\"\n\t\t\t[id]=\"id\"\n\t\t\t[required]=\"required\"\n\t\t\t[attr.value]=\"value\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<div *ngIf=\"skeleton\" class=\"cds--radio-button cds--skeleton\"></div>\n\t\t<label\n\t\t\tclass=\"cds--radio-button__label\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\"\n\t\t\t[for]=\"id\"\n\t\t\tid=\"label-{{id}}\">\n\t\t\t<span class=\"cds--radio-button__appearance\"></span>\n\t\t\t<ng-content></ng-content>\n\t\t</label>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Radio,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Radio {\n\t/**\n\t * Used to dynamically create unique ids for the `Radio`.\n\t */\n\tstatic radioCount = 0;\n\n\t@Input() checked = false;\n\n\t@Input() name = \"\";\n\n\t@Input() disabled = false;\n\n\t@Input() labelPlacement: \"right\" | \"left\" =  \"right\";\n\n\t@Input() set ariaLabelledby(value: string) {\n\t\tthis._labelledby = value;\n\t}\n\n\tget ariaLabelledby() {\n\t\tif (this._labelledby) {\n\t\t\treturn this._labelledby;\n\t\t}\n\t\treturn `label-${this.id}`;\n\t}\n\n\t/**\n\t * Used to set the `aria-label` attribute on the input label.\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Sets the HTML required attribute\n\t */\n\t@Input() required = false;\n\t/**\n\t * The value of the `Radio`.\n\t */\n\t@Input() value;\n\t/**\n\t * Set to `true` for a loading table.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * The id for the `Radio`.\n\t */\n\t@Input() id = `radio-${Radio.radioCount++}`;\n\t/**\n\t * emits when the state of the radio changes\n\t */\n\t@Output() change = new EventEmitter<RadioChange>();\n\n\t@HostBinding(\"class.cds--radio-button-wrapper\") hostClass = true;\n\n\t@HostBinding(\"class.cds--radio-button-wrapper--label-left\") get labelLeft() {\n\t\treturn this.labelPlacement === \"left\";\n\t}\n\n\t/**\n\t * Reflects whether or not the input is disabled at `RadioGroup` level.\n\t */\n\tdisabledFromGroup = false;\n\n\tprotected _labelledby = \"\";\n\n\t/**\n\t * Handler provided by the `RadioGroup` to bubble events up\n\t */\n\tradioChangeHandler = (event: RadioChange) => {};\n\n\t/**\n\t * Synchronizes with the `RadioGroup` in the event of a changed `Radio`.\n\t * Emits the changes of both the `RadioGroup` and `Radio`.\n\t */\n\tonChange(event: Event) {\n\t\tevent.stopPropagation();\n\t}\n\n\tonClick(event: Event) {\n\t\tthis.checked = (event.target as HTMLInputElement).checked;\n\t\tconst radioEvent = new RadioChange(this, this.value);\n\t\tthis.change.emit(radioEvent);\n\t\tthis.radioChangeHandler(radioEvent);\n\t}\n\n\t/**\n\t * Method called by `RadioGroup` with a callback function to bubble `RadioChange` events\n\t * @param fn callback that expects a `RadioChange` as an argument\n\t */\n\tregisterRadioChangeHandler(fn: (event: RadioChange) => void) {\n\t\tthis.radioChangeHandler = fn;\n\t}\n\n\tsetDisabledFromGroup(disabled: boolean) {\n\t\tthis.disabledFromGroup = disabled;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -41546,7 +41667,7 @@
         },
         {
             "name": "RadioGroup",
-            "id": "component-RadioGroup-a19039796bb3d83a44c8da02981e5727d2e4efd7ceeeedc28725a9d37ae2a75f9ef8687bd0f0370ace0f9e8a5e174cbc9028166c032683618365a947fa026480",
+            "id": "component-RadioGroup-eb7f6b447e4eb186c075006786b0a294153ab7d41ecb0c9b9e4a9ddf3610b8351cbcb82263f96c5550fdbb23264650fab8a998e623e482edaa152a7a4ab18c08",
             "file": "src/radio/radio-group.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -41560,7 +41681,7 @@
             "selector": "cds-radio-group, ibm-radio-group",
             "styleUrls": [],
             "styles": [],
-            "template": "<div\n\tclass=\"cds--radio-button-group\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t[ngClass]=\"{\n\t\t'cds--radio-button-group--vertical': orientation === 'vertical',\n\t\t'cds--radio-button-group--label-left': labelPlacement === 'left'\n\t}\">\n\t<ng-content></ng-content>\n</div>\n\t",
+            "template": "<fieldset\n\tclass=\"cds--radio-button-group\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t[ngClass]=\"{\n\t\t'cds--radio-button-group--vertical': orientation === 'vertical',\n\t\t'cds--radio-button-group--label-left': labelPlacement === 'left',\n\t\t'cds--radio-button-group--invalid' : !warn && invalid,\n\t\t'cds--radio-button-group--warning': !invalid && warn\n\t}\"\n\t[attr.data-invalid]=\"invalid ? true : null\">\n\t<legend *ngIf=\"legend\" class=\"cds--label\">\n\t\t<ng-template *ngIf=\"isTemplate(legend); else legendLabel;\" [ngTemplateOutlet]=\"legend\"></ng-template>\n\t\t<ng-template #legendLabel>{{legend}}</ng-template>\n\t</legend>\n\t<ng-content></ng-content>\n</fieldset>\n<div class=\"cds--radio-button__validation-msg\">\n\t<ng-container *ngIf=\"!warn && invalid\">\n\t\t<svg\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--radio-button__invalid-icon\">\n\t\t</svg>\n\t\t<div class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t</ng-container>\n\t<ng-container *ngIf=\"!invalid && warn\">\n\t\t<svg\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tclass=\"cds--radio-button__invalid-icon cds--radio-button__invalid-icon--warning\"\n\t\t\tsize=\"16\">\n\t\t</svg>\n\t\t<div class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t</ng-container>\n</div>\n<div\n\t*ngIf=\"helperText && !invalid && !warn\"\n\tclass=\"cds--form__helper-text\"\n\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -41571,7 +41692,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to set the `aria-label` attribute on the radio group element.\n",
                     "description": "<p>Used to set the <code>aria-label</code> attribute on the radio group element.</p>\n",
-                    "line": 81,
+                    "line": 213,
                     "type": "string",
                     "decorators": []
                 },
@@ -41581,7 +41702,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to set the `aria-labelledby` attribute on the radio group element.\n",
                     "description": "<p>Used to set the <code>aria-labelledby</code> attribute on the radio group element.</p>\n",
-                    "line": 86,
+                    "line": 218,
                     "type": "string",
                     "decorators": []
                 },
@@ -41591,26 +41712,65 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to true to disable the whole radio group\n",
                     "description": "<p>Set to true to disable the whole radio group</p>\n",
-                    "line": 164,
+                    "line": 173,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "helperText",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nSets the optional helper text.\n",
+                    "description": "<p>Sets the optional helper text.</p>\n",
+                    "line": 223,
+                    "type": "string | TemplateRef<any>",
+                    "decorators": []
+                },
+                {
+                    "name": "invalid",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nSet to `true` to show the invalid state.\n",
+                    "description": "<p>Set to <code>true</code> to show the invalid state.</p>\n",
+                    "line": 228,
                     "type": "boolean",
                     "decorators": []
                 },
+                {
+                    "name": "invalidText",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nValue displayed if combobox is in an invalid state.\n",
+                    "description": "<p>Value displayed if combobox is in an invalid state.</p>\n",
+                    "line": 233,
+                    "type": "string | TemplateRef<any>",
+                    "decorators": []
+                },
                 {
                     "name": "labelPlacement",
                     "defaultValue": "\"right\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 75,
+                    "line": 206,
                     "type": "\"right\" | \"left\"",
                     "decorators": []
                 },
+                {
+                    "name": "legend",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 208,
+                    "type": "string | TemplateRef<any>",
+                    "decorators": []
+                },
                 {
                     "name": "name",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReplaces the name associated with the `RadioGroup` with the provided parameter.\n",
                     "description": "<p>Replaces the name associated with the <code>RadioGroup</code> with the provided parameter.</p>\n",
-                    "line": 149,
+                    "line": 158,
                     "type": "string",
                     "decorators": []
                 },
@@ -41619,7 +41779,7 @@
                     "defaultValue": "\"horizontal\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 73,
+                    "line": 204,
                     "type": "\"horizontal\" | \"vertical\"",
                     "decorators": []
                 },
@@ -41629,7 +41789,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the passed in `Radio` item as the selected input within the `RadioGroup`.\n",
                     "description": "<p>Sets the passed in <code>Radio</code> item as the selected input within the <code>RadioGroup</code>.</p>\n",
-                    "line": 103,
+                    "line": 112,
                     "type": "Radio | null",
                     "decorators": []
                 },
@@ -41639,7 +41799,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns the skeleton value in the `RadioGroup` if there is one.\n",
                     "description": "<p>Returns the skeleton value in the <code>RadioGroup</code> if there is one.</p>\n",
-                    "line": 179,
+                    "line": 188,
                     "type": "any",
                     "decorators": []
                 },
@@ -41649,9 +41809,30 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.\n",
                     "description": "<p>Sets the value/state of the selected <code>Radio</code> within the <code>RadioGroup</code> to the passed in value.</p>\n",
-                    "line": 129,
+                    "line": 138,
                     "type": "any",
                     "decorators": []
+                },
+                {
+                    "name": "warn",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nSet to `true` to show a warning (contents set by warnText)\n",
+                    "description": "<p>Set to <code>true</code> to show a warning (contents set by warnText)</p>\n",
+                    "line": 238,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "warnText",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nSets the warning text\n",
+                    "description": "<p>Sets the warning text</p>\n",
+                    "line": 243,
+                    "type": "string | TemplateRef<any>",
+                    "decorators": []
                 }
             ],
             "outputsClass": [
@@ -41662,7 +41843,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits event notifying other classes of a change using a `RadioChange` class.\n",
                     "description": "<p>Emits event notifying other classes of a change using a <code>RadioChange</code> class.</p>\n",
-                    "line": 91,
+                    "line": 248,
                     "type": "EventEmitter<RadioChange>"
                 }
             ],
@@ -41675,7 +41856,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "<p>Needed to properly implement ControlValueAccessor.</p>\n",
-                    "line": 336,
+                    "line": 401,
                     "rawdescription": "\n\nNeeded to properly implement ControlValueAccessor.\n"
                 },
                 {
@@ -41686,7 +41867,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Method set in registerOnChange to propagate changes back to the form.</p>\n",
-                    "line": 341,
+                    "line": 406,
                     "rawdescription": "\n\nMethod set in registerOnChange to propagate changes back to the form.\n"
                 },
                 {
@@ -41697,7 +41878,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Binds &#39;cds--form-item&#39; value to the class for <code>RadioGroup</code>.</p>\n",
-                    "line": 194,
+                    "line": 259,
                     "rawdescription": "\n\nBinds 'cds--form-item' value to the class for `RadioGroup`.\n",
                     "decorators": [
                         {
@@ -41717,7 +41898,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Used for creating the <code>RadioGroup</code> &#39;name&#39; property dynamically.</p>\n",
-                    "line": 71,
+                    "line": 202,
                     "rawdescription": "\n\nUsed for creating the `RadioGroup` 'name' property dynamically.\n",
                     "modifierKind": [
                         124
@@ -41730,7 +41911,7 @@
                     "type": "QueryList<Radio>",
                     "optional": false,
                     "description": "<p>The <code>Radio</code> input items in the <code>RadioGroup</code>.</p>\n",
-                    "line": 97,
+                    "line": 254,
                     "rawdescription": "\n\nThe `Radio` input items in the `RadioGroup`.\n",
                     "decorators": [
                         {
@@ -41750,7 +41931,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 224,
+                    "line": 289,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUpdates the selected `Radio` to be checked (selected).\n",
@@ -41769,7 +41950,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 265,
+                    "line": 330,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates a class of `RadioChange` to emit the change in the `RadioGroup`.\n",
@@ -41792,7 +41973,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 329,
+                    "line": 394,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -41805,6 +41986,37 @@
                         167
                     ]
                 },
+                {
+                    "name": "isTemplate",
+                    "args": [
+                        {
+                            "name": "value",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "boolean",
+                    "typeParameters": [],
+                    "line": 408,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "modifierKind": [
+                        123
+                    ],
+                    "jsdoctags": [
+                        {
+                            "name": "value",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
                 {
                     "name": "registerOnChange",
                     "args": [
@@ -41818,7 +42030,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 316,
+                    "line": 381,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to set method to propagate changes back to the form.\n",
@@ -41851,7 +42063,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 324,
+                    "line": 389,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n",
@@ -41862,8 +42074,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7354,
-                                "end": 7356,
+                                "pos": 9430,
+                                "end": 9432,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -41874,8 +42086,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7348,
-                                "end": 7353,
+                                "pos": 9424,
+                                "end": 9429,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -41899,7 +42111,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 258,
+                    "line": 323,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the `RadioGroup`.\n\nex: `this.formGroup.get(\"myRadioGroup\").disable();`\n\n",
@@ -41907,8 +42119,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5985,
-                                "end": 5995,
+                                "pos": 8061,
+                                "end": 8071,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -41919,8 +42131,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5979,
-                                "end": 5984,
+                                "pos": 8055,
+                                "end": 8060,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -41937,7 +42149,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 274,
+                    "line": 339,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSynchronizes radio properties.\n",
@@ -41949,7 +42161,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 233,
+                    "line": 298,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUse the value of the `RadioGroup` to update the selected radio to the right state (selected state).\n",
@@ -41968,7 +42180,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 291,
+                    "line": 356,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUpdates the value of the `RadioGroup` using the provided parameter.\n",
@@ -41996,7 +42208,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nBinds 'cds--form-item' value to the class for `RadioGroup`.\n",
                     "description": "<p>Binds &#39;cds--form-item&#39; value to the class for <code>RadioGroup</code>.</p>\n",
-                    "line": 194,
+                    "line": 259,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -42008,7 +42220,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 329
+                    "line": 394
                 }
             ],
             "standalone": false,
@@ -42016,7 +42228,7 @@
             "description": "<p><a href=\"../../?path=/story/components-radio--basic\">See demo</a></p>\n<p>class: RadioGroup</p>\n<p>selector: <code>cds-radio-group</code></p>\n<p>source: <code>src/forms/radio.component.ts</code></p>\n<p>Ex:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-radio-group [(ngModel)]=&quot;radio&quot;&gt;\n    &lt;cds-radio *ngFor=&quot;let one of manyRadios&quot; [value]=&quot;one&quot;&gt;\n        Radio {{one}}\n    &lt;/cds-radio&gt;\n&lt;/cds-radio-group&gt;\n\nRadio selected: {{radio}}</code></pre></div><div><pre class=\"line-numbers\"><code class=\"language-ts\">    const manyRadios = [&quot;one&quot;, &quot;two&quot;, &quot;three&quot;, &quot;four&quot;, &quot;five&quot;, &quot;six&quot;];</code></pre></div><p>Also see: <a href=\"#cds-radio\">Radio</a></p>\n",
             "rawdescription": "\n\n[See demo](../../?path=/story/components-radio--basic)\n\nclass: RadioGroup\n\nselector: `cds-radio-group`\n\nsource: `src/forms/radio.component.ts`\n\nEx:\n\n```html\n<cds-radio-group [(ngModel)]=\"radio\">\n\t<cds-radio *ngFor=\"let one of manyRadios\" [value]=\"one\">\n\t\tRadio {{one}}\n\t</cds-radio>\n</cds-radio-group>\n\nRadio selected: {{radio}}\n```\n\n```ts\n\tconst manyRadios = [\"one\", \"two\", \"three\", \"four\", \"five\", \"six\"];\n```\n\nAlso see: [Radio](#cds-radio)\n",
             "type": "component",
-            "sourceCode": "import {\n\tAfterContentInit,\n\tContentChildren,\n\tComponent,\n\tEventEmitter,\n\tforwardRef,\n\tInput,\n\tOutput,\n\tQueryList,\n\tHostBinding,\n\tAfterViewInit,\n\tHostListener\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { Radio } from \"./radio.component\";\nimport { RadioChange } from \"./radio-change.class\";\n\n/**\n * [See demo](../../?path=/story/components-radio--basic)\n *\n * class: RadioGroup\n *\n * selector: `cds-radio-group`\n *\n * source: `src/forms/radio.component.ts`\n *\n * Ex:\n *\n * ```html\n * <cds-radio-group [(ngModel)]=\"radio\">\n * \t<cds-radio *ngFor=\"let one of manyRadios\" [value]=\"one\">\n *\t\tRadio {{one}}\n * \t</cds-radio>\n * </cds-radio-group>\n *\n * Radio selected: {{radio}}\n * ```\n *\n * ```ts\n *\tconst manyRadios = [\"one\", \"two\", \"three\", \"four\", \"five\", \"six\"];\n * ```\n *\n * Also see: [Radio](#cds-radio)\n */\n@Component({\n\tselector: \"cds-radio-group, ibm-radio-group\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--radio-button-group\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--radio-button-group--vertical': orientation === 'vertical',\n\t\t\t\t'cds--radio-button-group--label-left': labelPlacement === 'left'\n\t\t\t}\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: RadioGroup,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class RadioGroup implements AfterContentInit, AfterViewInit, ControlValueAccessor {\n\t/**\n\t * Used for creating the `RadioGroup` 'name' property dynamically.\n\t */\n\tstatic radioGroupCount = 0;\n\n\t@Input() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n\n\t@Input() labelPlacement: \"right\" | \"left\" =  \"right\";\n\n\t/**\n\t * Used to set the `aria-label` attribute on the radio group element.\n\t */\n\t// tslint:disable-next-line:no-input-rename\n\t@Input() ariaLabel: string;\n\t/**\n\t * Used to set the `aria-labelledby` attribute on the radio group element.\n\t */\n\t// tslint:disable-next-line:no-input-rename\n\t@Input() ariaLabelledby: string;\n\n\t/**\n\t * Emits event notifying other classes of a change using a `RadioChange` class.\n\t */\n\t@Output() change: EventEmitter<RadioChange> = new EventEmitter<RadioChange>();\n\n\t/**\n\t * The `Radio` input items in the `RadioGroup`.\n\t */\n\t// tslint:disable-next-line:no-forward-ref\n\t@ContentChildren(forwardRef(() => Radio)) radios: QueryList<Radio>;\n\n\t/**\n\t * Sets the passed in `Radio` item as the selected input within the `RadioGroup`.\n\t */\n\t@Input()\n\tset selected(selected: Radio | null) {\n\t\tconst alreadySelected = (this._selected && this._selected.value) === (selected && selected.value);\n\t\tif (alreadySelected) {\n\t\t\t// no need to redo\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._selected) {\n\t\t\tthis._selected.checked = false;\n\t\t}\n\t\tthis._selected = selected;\n\t\tthis.value = selected ? selected.value : null;\n\t\tthis.checkSelectedRadio();\n\t}\n\n\t/**\n\t * Returns the `Radio` that is selected within the `RadioGroup`.\n\t */\n\tget selected() {\n\t\treturn this._selected;\n\t}\n\n\t/**\n\t * Sets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.\n\t */\n\t@Input()\n\tset value(newValue: any) {\n\t\tif (this._value !== newValue) {\n\t\t\tthis._value = newValue;\n\n\t\t\tthis.updateSelectedRadioFromValue();\n\t\t\tthis.checkSelectedRadio();\n\t\t}\n\t}\n\n\t/**\n\t * Returns the value/state of the selected `Radio` within the `RadioGroup`.\n\t */\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Replaces the name associated with the `RadioGroup` with the provided parameter.\n\t */\n\t@Input()\n\tset name(name: string) {\n\t\tthis._name = name;\n\t\tthis.updateRadios();\n\t}\n\t/**\n\t * Returns the associated name of the `RadioGroup`.\n\t */\n\tget name() {\n\t\treturn this._name;\n\t}\n\n\t/**\n\t * Set to true to disable the whole radio group\n\t */\n\t@Input()\n\tset disabled(disabled: boolean) {\n\t\tthis._disabled = disabled;\n\t\tthis.updateRadios();\n\t}\n\t/**\n\t * Returns the disabled value for the `RadioGroup`.\n\t */\n\tget disabled(): boolean {\n\t\treturn this._disabled;\n\t}\n\n\t/**\n\t * Returns the skeleton value in the `RadioGroup` if there is one.\n\t */\n\t@Input()\n\tget skeleton(): any {\n\t\treturn this._skeleton;\n\t}\n\n\t/**\n\t * Sets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.\n\t */\n\tset skeleton(value: any) {\n\t\tthis._skeleton = value;\n\t\tthis.updateChildren();\n\t}\n\n\t/**\n\t * Binds 'cds--form-item' value to the class for `RadioGroup`.\n\t */\n\t@HostBinding(\"class.cds--form-item\") radioButtonGroupClass = true;\n\n\t/**\n\t * To track whether the `RadioGroup` has been initialized.\n\t */\n\tprotected isInitialized = false;\n\t/**\n\t * Reflects whether or not the input is disabled and cannot be selected.\n\t */\n\tprotected _disabled = false;\n\t/**\n\t * Reflects whether or not the dropdown is loading.\n\t */\n\tprotected _skeleton = false;\n\t/**\n\t * The value of the selected option within the `RadioGroup`.\n\t */\n\tprotected _value: any = null;\n\t/**\n\t * The `Radio` within the `RadioGroup` that is selected.\n\t */\n\tprotected _selected: Radio = null;\n\t/**\n\t * The name attribute associated with the `RadioGroup`.\n\t */\n\tprotected _name = `radio-group-${RadioGroup.radioGroupCount++}`;\n\n\t/**\n\t * Updates the selected `Radio` to be checked (selected).\n\t */\n\tcheckSelectedRadio() {\n\t\tif (this.selected && !this._selected.checked) {\n\t\t\tthis.selected.checked = true;\n\t\t}\n\t}\n\n\t/**\n\t * Use the value of the `RadioGroup` to update the selected radio to the right state (selected state).\n\t */\n\tupdateSelectedRadioFromValue() {\n\t\tlet alreadySelected = this._selected != null && this._selected.value === this._value;\n\t\tif (this.radios && !alreadySelected) {\n\t\t\tif (this.selected && this.value) {\n\t\t\t\tthis.selected.checked = false;\n\t\t\t}\n\t\t\tthis._selected = null;\n\t\t\tthis.radios.forEach(radio => {\n\t\t\t\tif (radio.checked || radio.value === this._value) {\n\t\t\t\t\tthis._selected = radio;\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (this.selected && !this.value) {\n\t\t\t\tthis._value = this.selected.value;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the `RadioGroup`.\n\t *\n\t * ex: `this.formGroup.get(\"myRadioGroup\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the inputs\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Creates a class of `RadioChange` to emit the change in the `RadioGroup`.\n\t */\n\temitChangeEvent(event: RadioChange) {\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(event.value);\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Synchronizes radio properties.\n\t */\n\tupdateRadios() {\n\t\tif (this.radios) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.radios.forEach(radio => {\n\t\t\t\t\tradio.name = this.name;\n\t\t\t\t\tradio.setDisabledFromGroup(this.disabled);\n\t\t\t\t\tif (this.labelPlacement === \"left\") {\n\t\t\t\t\t\tradio.labelPlacement = \"left\";\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Updates the value of the `RadioGroup` using the provided parameter.\n\t */\n\twriteValue(value: any) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tthis.updateSelectedRadioFromValue();\n\t\t\tthis.checkSelectedRadio();\n\t\t});\n\t}\n\n\tngAfterContentInit() {\n\t\tthis.radios.changes.subscribe(() => {\n\t\t\tthis.updateRadios();\n\t\t\tthis.updateRadioChangeHandler();\n\t\t});\n\n\t\tthis.updateChildren();\n\t\tthis.updateRadioChangeHandler();\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.updateRadios();\n\t}\n\n\t/**\n\t * Used to set method to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the checkbox is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Needed to properly implement ControlValueAccessor.\n\t */\n\tonTouched: () => any = () => {};\n\n\t/**\n\t * Method set in registerOnChange to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => {};\n\n\tprotected updateChildren() {\n\t\tif (this.radios) {\n\t\t\tthis.radios.forEach(child => child.skeleton = this.skeleton);\n\t\t}\n\t}\n\n\tprotected updateRadioChangeHandler() {\n\t\tthis.radios.forEach(radio => {\n\t\t\tradio.registerRadioChangeHandler((event: RadioChange) => {\n\t\t\t\tif ((this.selected && this.selected.value) === event.value) {\n\t\t\t\t\t// no need to redo\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t// deselect previous radio\n\t\t\t\tif (this.selected) {\n\t\t\t\t\tthis.selected.checked = false;\n\t\t\t\t}\n\t\t\t\t// update selected and value from the event\n\t\t\t\tthis._selected = event.source;\n\t\t\t\tthis._value = event.value;\n\t\t\t\t// bubble the event\n\t\t\t\tthis.emitChangeEvent(event);\n\t\t\t});\n\t\t});\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterContentInit,\n\tContentChildren,\n\tComponent,\n\tEventEmitter,\n\tforwardRef,\n\tInput,\n\tOutput,\n\tQueryList,\n\tHostBinding,\n\tAfterViewInit,\n\tHostListener,\n\tTemplateRef\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { Radio } from \"./radio.component\";\nimport { RadioChange } from \"./radio-change.class\";\n\n/**\n * [See demo](../../?path=/story/components-radio--basic)\n *\n * class: RadioGroup\n *\n * selector: `cds-radio-group`\n *\n * source: `src/forms/radio.component.ts`\n *\n * Ex:\n *\n * ```html\n * <cds-radio-group [(ngModel)]=\"radio\">\n * \t<cds-radio *ngFor=\"let one of manyRadios\" [value]=\"one\">\n *\t\tRadio {{one}}\n * \t</cds-radio>\n * </cds-radio-group>\n *\n * Radio selected: {{radio}}\n * ```\n *\n * ```ts\n *\tconst manyRadios = [\"one\", \"two\", \"three\", \"four\", \"five\", \"six\"];\n * ```\n *\n * Also see: [Radio](#cds-radio)\n */\n@Component({\n\tselector: \"cds-radio-group, ibm-radio-group\",\n\ttemplate: `\n\t\t<fieldset\n\t\t\tclass=\"cds--radio-button-group\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--radio-button-group--vertical': orientation === 'vertical',\n\t\t\t\t'cds--radio-button-group--label-left': labelPlacement === 'left',\n\t\t\t\t'cds--radio-button-group--invalid' : !warn && invalid,\n\t\t\t\t'cds--radio-button-group--warning': !invalid && warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"invalid ? true : null\">\n\t\t\t<legend *ngIf=\"legend\" class=\"cds--label\">\n\t\t\t\t<ng-template *ngIf=\"isTemplate(legend); else legendLabel;\" [ngTemplateOutlet]=\"legend\"></ng-template>\n\t\t\t\t<ng-template #legendLabel>{{legend}}</ng-template>\n\t\t\t</legend>\n\t\t\t<ng-content></ng-content>\n\t\t</fieldset>\n\t\t<div class=\"cds--radio-button__validation-msg\">\n\t\t\t<ng-container *ngIf=\"!warn && invalid\">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--radio-button__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"!invalid && warn\">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tclass=\"cds--radio-button__invalid-icon cds--radio-button__invalid-icon--warning\"\n\t\t\t\t\tsize=\"16\">\n\t\t\t\t</svg>\n\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: RadioGroup,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class RadioGroup implements AfterContentInit, AfterViewInit, ControlValueAccessor {\n\n\t/**\n\t * Sets the passed in `Radio` item as the selected input within the `RadioGroup`.\n\t */\n\t@Input()\n\tset selected(selected: Radio | null) {\n\t\tconst alreadySelected = (this._selected && this._selected.value) === (selected && selected.value);\n\t\tif (alreadySelected) {\n\t\t\t// no need to redo\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._selected) {\n\t\t\tthis._selected.checked = false;\n\t\t}\n\t\tthis._selected = selected;\n\t\tthis.value = selected ? selected.value : null;\n\t\tthis.checkSelectedRadio();\n\t}\n\n\t/**\n\t * Returns the `Radio` that is selected within the `RadioGroup`.\n\t */\n\tget selected() {\n\t\treturn this._selected;\n\t}\n\n\t/**\n\t * Sets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.\n\t */\n\t@Input()\n\tset value(newValue: any) {\n\t\tif (this._value !== newValue) {\n\t\t\tthis._value = newValue;\n\n\t\t\tthis.updateSelectedRadioFromValue();\n\t\t\tthis.checkSelectedRadio();\n\t\t}\n\t}\n\n\t/**\n\t * Returns the value/state of the selected `Radio` within the `RadioGroup`.\n\t */\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Replaces the name associated with the `RadioGroup` with the provided parameter.\n\t */\n\t@Input()\n\tset name(name: string) {\n\t\tthis._name = name;\n\t\tthis.updateRadios();\n\t}\n\t/**\n\t * Returns the associated name of the `RadioGroup`.\n\t */\n\tget name() {\n\t\treturn this._name;\n\t}\n\n\t/**\n\t * Set to true to disable the whole radio group\n\t */\n\t@Input()\n\tset disabled(disabled: boolean) {\n\t\tthis._disabled = disabled;\n\t\tthis.updateRadios();\n\t}\n\t/**\n\t * Returns the disabled value for the `RadioGroup`.\n\t */\n\tget disabled(): boolean {\n\t\treturn this._disabled;\n\t}\n\n\t/**\n\t * Returns the skeleton value in the `RadioGroup` if there is one.\n\t */\n\t@Input()\n\tget skeleton(): any {\n\t\treturn this._skeleton;\n\t}\n\n\t/**\n\t * Sets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.\n\t */\n\tset skeleton(value: any) {\n\t\tthis._skeleton = value;\n\t\tthis.updateChildren();\n\t}\n\t/**\n\t * Used for creating the `RadioGroup` 'name' property dynamically.\n\t */\n\tstatic radioGroupCount = 0;\n\n\t@Input() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n\n\t@Input() labelPlacement: \"right\" | \"left\" =  \"right\";\n\n\t@Input() legend: string | TemplateRef<any>;\n\n\t/**\n\t * Used to set the `aria-label` attribute on the radio group element.\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Used to set the `aria-labelledby` attribute on the radio group element.\n\t */\n\t@Input() ariaLabelledby: string;\n\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t/**\n\t * Emits event notifying other classes of a change using a `RadioChange` class.\n\t */\n\t@Output() change: EventEmitter<RadioChange> = new EventEmitter<RadioChange>();\n\n\t/**\n\t * The `Radio` input items in the `RadioGroup`.\n\t */\n\t// tslint:disable-next-line:no-forward-ref\n\t@ContentChildren(forwardRef(() => Radio)) radios: QueryList<Radio>;\n\n\t/**\n\t * Binds 'cds--form-item' value to the class for `RadioGroup`.\n\t */\n\t@HostBinding(\"class.cds--form-item\") radioButtonGroupClass = true;\n\n\t/**\n\t * To track whether the `RadioGroup` has been initialized.\n\t */\n\tprotected isInitialized = false;\n\t/**\n\t * Reflects whether or not the input is disabled and cannot be selected.\n\t */\n\tprotected _disabled = false;\n\t/**\n\t * Reflects whether or not the dropdown is loading.\n\t */\n\tprotected _skeleton = false;\n\t/**\n\t * The value of the selected option within the `RadioGroup`.\n\t */\n\tprotected _value: any = null;\n\t/**\n\t * The `Radio` within the `RadioGroup` that is selected.\n\t */\n\tprotected _selected: Radio = null;\n\t/**\n\t * The name attribute associated with the `RadioGroup`.\n\t */\n\tprotected _name = `radio-group-${RadioGroup.radioGroupCount++}`;\n\n\t/**\n\t * Updates the selected `Radio` to be checked (selected).\n\t */\n\tcheckSelectedRadio() {\n\t\tif (this.selected && !this._selected.checked) {\n\t\t\tthis.selected.checked = true;\n\t\t}\n\t}\n\n\t/**\n\t * Use the value of the `RadioGroup` to update the selected radio to the right state (selected state).\n\t */\n\tupdateSelectedRadioFromValue() {\n\t\tlet alreadySelected = this._selected != null && this._selected.value === this._value;\n\t\tif (this.radios && !alreadySelected) {\n\t\t\tif (this.selected && this.value) {\n\t\t\t\tthis.selected.checked = false;\n\t\t\t}\n\t\t\tthis._selected = null;\n\t\t\tthis.radios.forEach(radio => {\n\t\t\t\tif (radio.checked || radio.value === this._value) {\n\t\t\t\t\tthis._selected = radio;\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (this.selected && !this.value) {\n\t\t\t\tthis._value = this.selected.value;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the `RadioGroup`.\n\t *\n\t * ex: `this.formGroup.get(\"myRadioGroup\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the inputs\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Creates a class of `RadioChange` to emit the change in the `RadioGroup`.\n\t */\n\temitChangeEvent(event: RadioChange) {\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(event.value);\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Synchronizes radio properties.\n\t */\n\tupdateRadios() {\n\t\tif (this.radios) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.radios.forEach(radio => {\n\t\t\t\t\tradio.name = this.name;\n\t\t\t\t\tradio.setDisabledFromGroup(this.disabled);\n\t\t\t\t\tif (this.labelPlacement === \"left\") {\n\t\t\t\t\t\tradio.labelPlacement = \"left\";\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Updates the value of the `RadioGroup` using the provided parameter.\n\t */\n\twriteValue(value: any) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tthis.updateSelectedRadioFromValue();\n\t\t\tthis.checkSelectedRadio();\n\t\t});\n\t}\n\n\tngAfterContentInit() {\n\t\tthis.radios.changes.subscribe(() => {\n\t\t\tthis.updateRadios();\n\t\t\tthis.updateRadioChangeHandler();\n\t\t});\n\n\t\tthis.updateChildren();\n\t\tthis.updateRadioChangeHandler();\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.updateRadios();\n\t}\n\n\t/**\n\t * Used to set method to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the checkbox is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Needed to properly implement ControlValueAccessor.\n\t */\n\tonTouched: () => any = () => {};\n\n\t/**\n\t * Method set in registerOnChange to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => {};\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tprotected updateChildren() {\n\t\tif (this.radios) {\n\t\t\tthis.radios.forEach(child => child.skeleton = this.skeleton);\n\t\t}\n\t}\n\n\tprotected updateRadioChangeHandler() {\n\t\tthis.radios.forEach(radio => {\n\t\t\tradio.registerRadioChangeHandler((event: RadioChange) => {\n\t\t\t\tif ((this.selected && this.selected.value) === event.value) {\n\t\t\t\t\t// no need to redo\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t// deselect previous radio\n\t\t\t\tif (this.selected) {\n\t\t\t\t\tthis.selected.checked = false;\n\t\t\t\t}\n\t\t\t\t// update selected and value from the event\n\t\t\t\tthis._selected = event.source;\n\t\t\t\tthis._value = event.value;\n\t\t\t\t// bubble the event\n\t\t\t\tthis.emitChangeEvent(event);\n\t\t\t});\n\t\t});\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -42042,7 +42254,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 103,
+                        "line": 112,
                         "rawdescription": "\n\nSets the passed in `Radio` item as the selected input within the `RadioGroup`.\n",
                         "description": "<p>Sets the passed in <code>Radio</code> item as the selected input within the <code>RadioGroup</code>.</p>\n",
                         "jsdoctags": [
@@ -42061,7 +42273,7 @@
                         "name": "selected",
                         "type": "",
                         "returnType": "",
-                        "line": 121,
+                        "line": 130,
                         "rawdescription": "\n\nReturns the `Radio` that is selected within the `RadioGroup`.\n",
                         "description": "<p>Returns the <code>Radio</code> that is selected within the <code>RadioGroup</code>.</p>\n"
                     }
@@ -42082,7 +42294,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 129,
+                        "line": 138,
                         "rawdescription": "\n\nSets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.\n",
                         "description": "<p>Sets the value/state of the selected <code>Radio</code> within the <code>RadioGroup</code> to the passed in value.</p>\n",
                         "jsdoctags": [
@@ -42101,7 +42313,7 @@
                         "name": "value",
                         "type": "",
                         "returnType": "",
-                        "line": 141,
+                        "line": 150,
                         "rawdescription": "\n\nReturns the value/state of the selected `Radio` within the `RadioGroup`.\n",
                         "description": "<p>Returns the value/state of the selected <code>Radio</code> within the <code>RadioGroup</code>.</p>\n"
                     }
@@ -42122,7 +42334,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 149,
+                        "line": 158,
                         "rawdescription": "\n\nReplaces the name associated with the `RadioGroup` with the provided parameter.\n",
                         "description": "<p>Replaces the name associated with the <code>RadioGroup</code> with the provided parameter.</p>\n",
                         "jsdoctags": [
@@ -42141,7 +42353,7 @@
                         "name": "name",
                         "type": "",
                         "returnType": "",
-                        "line": 156,
+                        "line": 165,
                         "rawdescription": "\n\nReturns the associated name of the `RadioGroup`.\n",
                         "description": "<p>Returns the associated name of the <code>RadioGroup</code>.</p>\n"
                     }
@@ -42162,7 +42374,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 164,
+                        "line": 173,
                         "rawdescription": "\n\nSet to true to disable the whole radio group\n",
                         "description": "<p>Set to true to disable the whole radio group</p>\n",
                         "jsdoctags": [
@@ -42181,7 +42393,7 @@
                         "name": "disabled",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 171,
+                        "line": 180,
                         "rawdescription": "\n\nReturns the disabled value for the `RadioGroup`.\n",
                         "description": "<p>Returns the disabled value for the <code>RadioGroup</code>.</p>\n"
                     }
@@ -42202,7 +42414,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 186,
+                        "line": 195,
                         "rawdescription": "\n\nSets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.\n",
                         "description": "<p>Sets the skeleton value for all <code>Radio</code> to the skeleton value of <code>RadioGroup</code>.</p>\n",
                         "jsdoctags": [
@@ -42221,7 +42433,7 @@
                         "name": "skeleton",
                         "type": "any",
                         "returnType": "any",
-                        "line": 179,
+                        "line": 188,
                         "rawdescription": "\n\nReturns the skeleton value in the `RadioGroup` if there is one.\n",
                         "description": "<p>Returns the skeleton value in the <code>RadioGroup</code> if there is one.</p>\n"
                     }
@@ -65172,13 +65384,13 @@
         },
         {
             "name": "RadioModule",
-            "id": "module-RadioModule-916932a999af2511bea978faacd079717aba4e7e14075ba1668f9c4b8aebb810c4e1f6d4baf5438c9c15396e8f78bd89271774f1f6c69fcc3b50e101a02374b3",
+            "id": "module-RadioModule-5b60c2abc6e47e3a77afa997f18bc6a5e5dedc04b6f929aa6766de1713b8323047ffb93c52475e0fb5f63965deed1af4eaace48e8ad1088cc2cbf39f13cba1e7",
             "description": "",
             "deprecationMessage": "",
             "deprecated": false,
             "file": "src/radio/radio.module.ts",
             "methods": [],
-            "sourceCode": "// modules\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\nimport { CommonModule } from \"@angular/common\";\n\n// imports\nimport { Radio } from \"./radio.component\";\nimport { RadioGroup } from \"./radio-group.component\";\n\n@NgModule({\n\tdeclarations: [\n\t\tRadio,\n\t\tRadioGroup\n\t],\n\texports: [\n\t\tRadio,\n\t\tRadioGroup\n\t],\n\timports: [\n\t\tCommonModule,\n\t\tFormsModule\n\t]\n})\nexport class RadioModule { }\n",
+            "sourceCode": "// modules\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\nimport { CommonModule } from \"@angular/common\";\n\n// imports\nimport { Radio } from \"./radio.component\";\nimport { RadioGroup } from \"./radio-group.component\";\nimport { IconModule } from \"carbon-components-angular/icon\";\n\n@NgModule({\n\tdeclarations: [\n\t\tRadio,\n\t\tRadioGroup\n\t],\n\texports: [\n\t\tRadio,\n\t\tRadioGroup\n\t],\n\timports: [\n\t\tCommonModule,\n\t\tFormsModule,\n\t\tIconModule\n\t]\n})\nexport class RadioModule { }\n",
             "children": [
                 {
                     "type": "providers",
@@ -65197,7 +65409,11 @@
                 },
                 {
                     "type": "imports",
-                    "elements": []
+                    "elements": [
+                        {
+                            "name": "IconModule"
+                        }
+                    ]
                 },
                 {
                     "type": "exports",
@@ -65938,13 +66154,13 @@
         },
         {
             "name": "TilesModule",
-            "id": "module-TilesModule-9b5159f1be2d4f3d9e70a3c922b614e93039264d551c08fa2d7b007b19deb0bcbefa4ba6e9128ae3024316a6f57cb2afd6635691e9352fe5211d1eb6280d8b80",
+            "id": "module-TilesModule-be7553ce1e8f3f4af7b5c76a38e25875159e6018a7cb3ef453ce2d303ded9093c80f01a10b61e0946cf14dbf5bfda4d2001a22b54f258517e46946f2058954f6",
             "description": "",
             "deprecationMessage": "",
             "deprecated": false,
             "file": "src/tiles/tiles.module.ts",
             "methods": [],
-            "sourceCode": "import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { Tile } from \"./tile.component\";\nimport { ClickableTile } from \"./clickable-tile.component\";\nimport { ExpandableTile } from \"./expandable-tile.component\";\nimport { SelectionTile } from \"./selection-tile.component\";\nimport { TileGroup } from \"./tile-group.component\";\nimport { I18nModule } from \"carbon-components-angular/i18n\";\nimport { LinkModule } from \"carbon-components-angular/link\";\n\n@NgModule({\n\tdeclarations: [\n\t\tTile,\n\t\tClickableTile,\n\t\tExpandableTile,\n\t\tSelectionTile,\n\t\tTileGroup\n\t],\n\texports: [\n\t\tTile,\n\t\tClickableTile,\n\t\tExpandableTile,\n\t\tSelectionTile,\n\t\tTileGroup\n\t],\n\timports: [\n\t\tCommonModule,\n\t\tI18nModule,\n\t\tLinkModule\n\t]\n})\nexport class TilesModule {}\n",
+            "sourceCode": "import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { Tile } from \"./tile.component\";\nimport { ClickableTile } from \"./clickable-tile.component\";\nimport { ExpandableTile } from \"./expandable-tile.component\";\nimport { ExpandableTileAboveFoldDirective } from \"./expandable-tile-above.directive\";\nimport { ExpandableTileBelowFoldDirective } from \"./expandable-tile-below.directive\";\nimport { SelectionTile } from \"./selection-tile.component\";\nimport { TileGroup } from \"./tile-group.component\";\nimport { I18nModule } from \"carbon-components-angular/i18n\";\nimport { IconModule } from \"carbon-components-angular/icon\";\nimport { LinkModule } from \"carbon-components-angular/link\";\n\n@NgModule({\n\tdeclarations: [\n\t\tTile,\n\t\tClickableTile,\n\t\tExpandableTileAboveFoldDirective,\n\t\tExpandableTileBelowFoldDirective,\n\t\tExpandableTile,\n\t\tSelectionTile,\n\t\tTileGroup\n\t],\n\texports: [\n\t\tTile,\n\t\tClickableTile,\n\t\tExpandableTileAboveFoldDirective,\n\t\tExpandableTileBelowFoldDirective,\n\t\tExpandableTile,\n\t\tSelectionTile,\n\t\tTileGroup\n\t],\n\timports: [\n\t\tCommonModule,\n\t\tI18nModule,\n\t\tIconModule,\n\t\tLinkModule\n\t]\n})\nexport class TilesModule {}\n",
             "children": [
                 {
                     "type": "providers",
@@ -65959,6 +66175,12 @@
                         {
                             "name": "ExpandableTile"
                         },
+                        {
+                            "name": "ExpandableTileAboveFoldDirective"
+                        },
+                        {
+                            "name": "ExpandableTileBelowFoldDirective"
+                        },
                         {
                             "name": "SelectionTile"
                         },
@@ -65976,6 +66198,9 @@
                         {
                             "name": "I18nModule"
                         },
+                        {
+                            "name": "IconModule"
+                        },
                         {
                             "name": "LinkModule"
                         }
@@ -65990,6 +66215,12 @@
                         {
                             "name": "ExpandableTile"
                         },
+                        {
+                            "name": "ExpandableTileAboveFoldDirective"
+                        },
+                        {
+                            "name": "ExpandableTileBelowFoldDirective"
+                        },
                         {
                             "name": "SelectionTile"
                         },
@@ -67729,6 +67960,26 @@
                 "type": "Story",
                 "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-inline-notification [notificationObj]=\"{\n\t\t\ttype: type,\n\t\t\ttitle: 'Sample notification',\n\t\t\tmessage: 'Sample error message',\n\t\t\tshowClose: showClose,\n\t\t\tlowContrast: lowContrast}\">\n\t\t</cds-inline-notification>\n\t`\n})"
             },
+            {
+                "name": "Interactive",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/tiles/expandable-tile.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "InteractiveTemplate.bind({})"
+            },
+            {
+                "name": "InteractiveTemplate",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/tiles/expandable-tile.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story<ExpandableTile>",
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-expandable-tile [interactive]=\"true\">\n\t\t\t<span cdsAboveFold style=\"height: 200px\">\n\t\t\t\tAbove the fold content\n\t\t\t\t<button ibmButton>Click me!</button>\n\t\t\t</span>\n\t\t\t<span cdsBelowFold style=\"height: 400px\">\n\t\t\t\tBelow the fold content here\n\t\t\t\t<button ibmButton>No me!</button>\n\t\t\t</span>\n\t\t</cds-expandable-tile>\n\t`\n})"
+            },
             {
                 "name": "isScrollableElement",
                 "ctype": "miscellaneous",
@@ -67791,7 +68042,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "Story<ExpandableTile>",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-expandable-tile>\n\t\t\t<span class=\"cds--tile-content__above-the-fold\" style=\"height: 200px\">\n\t\t\t\tFirst Layer, above the fold content here\n\t\t\t</span>\n\t\t\t<span class=\"cds--tile-content__below-the-fold\" style=\"height: 400px\">\n\t\t\t\tFirst Layer, below the fold content here\n\t\t\t</span>\n\t\t</cds-expandable-tile>\n\t\t<div cdsLayer>\n\t\t\t<cds-expandable-tile>\n\t\t\t\t<span class=\"cds--tile-content__above-the-fold\" style=\"height: 200px\">\n\t\t\t\t\tSecond layer, above the fold content here\n\t\t\t\t</span>\n\t\t\t\t<span class=\"cds--tile-content__below-the-fold\" style=\"height: 400px\">\n\t\t\t\t\tSecond layer, below the fold content here\n\t\t\t\t</span>\n\t\t\t</cds-expandable-tile>\n\t\t\t<div cdsLayer>\n\t\t\t\t<cds-expandable-tile>\n\t\t\t\t\t<span class=\"cds--tile-content__above-the-fold\" style=\"height: 200px\">\n\t\t\t\t\t\tThird layer, above the fold content here\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"cds--tile-content__below-the-fold\" style=\"height: 400px\">\n\t\t\t\t\t\tThird layer, below the fold content here\n\t\t\t\t\t</span>\n\t\t\t\t</cds-expandable-tile>\n\t\t\t</div>\n\t\t</div>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-expandable-tile>\n\t\t\t<span cdsAboveFold style=\"height: 200px\">\n\t\t\t\tFirst Layer, above the fold content here\n\t\t\t</span>\n\t\t\t<span cdsBelowFold style=\"height: 400px\">\n\t\t\t\tFirst Layer, below the fold content here\n\t\t\t</span>\n\t\t</cds-expandable-tile>\n\t\t<div cdsLayer>\n\t\t\t<cds-expandable-tile>\n\t\t\t\t<span cdsAboveFold style=\"height: 200px\">\n\t\t\t\t\tSecond layer, above the fold content here\n\t\t\t\t</span>\n\t\t\t\t<span cdsBelowFold style=\"height: 400px\">\n\t\t\t\t\tSecond layer, below the fold content here\n\t\t\t\t</span>\n\t\t\t</cds-expandable-tile>\n\t\t\t<div cdsLayer>\n\t\t\t\t<cds-expandable-tile>\n\t\t\t\t\t<span cdsAboveFold style=\"height: 200px\">\n\t\t\t\t\t\tThird layer, above the fold content here\n\t\t\t\t\t</span>\n\t\t\t\t\t<span cdsBelowFold style=\"height: 400px\">\n\t\t\t\t\t\tThird layer, below the fold content here\n\t\t\t\t\t</span>\n\t\t\t\t</cds-expandable-tile>\n\t\t\t</div>\n\t\t</div>\n\t`\n})"
             },
             {
                 "name": "LayerTemplate",
@@ -69328,7 +69579,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "Story<Radio>",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t<fieldset class=\"cds--fieldset\">\n\t\t<legend class=\"cds--label\">{{label}}</legend>\n\t\t<cds-radio-group\n\t\t\t[disabled]=\"disabled\"\n\t\t\taria-label=\"radiogroup\"\n\t\t\t[orientation]=\"orientation\"\n\t\t\t[labelPlacement]=\"labelPlacement\"\n\t\t\t(change)=\"onChange($event)\">\n\t\t\t<cds-radio value=\"Zero\" [checked]=\"true\">\n\t\t\t\tZero\n\t\t\t</cds-radio>\n\t\t\t<cds-radio [value]=\"One\">One</cds-radio>\n\t\t\t<cds-radio [value]=\"Two\">Two</cds-radio>\n\t\t\t<cds-radio [value]=\"Three\">Three</cds-radio>\n\t\t\t<cds-radio [value]=\"Four\" [disabled]=\"true\">Four</cds-radio>\n\t\t</cds-radio-group>\n\t</fieldset>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-radio-group\n\t\t\t[legend]=\"label\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\tariaLabel=\"radiogroup\"\n\t\t\t[orientation]=\"orientation\"\n\t\t\t[labelPlacement]=\"labelPlacement\"\n\t\t\t(change)=\"onChange($event)\">\n\t\t\t<cds-radio value=\"Zero\" [checked]=\"true\">\n\t\t\t\tZero\n\t\t\t</cds-radio>\n\t\t\t<cds-radio [value]=\"One\">One</cds-radio>\n\t\t\t<cds-radio [value]=\"Two\">Two</cds-radio>\n\t\t\t<cds-radio [value]=\"Three\">Three</cds-radio>\n\t\t\t<cds-radio [value]=\"Four\" [disabled]=\"true\">Four</cds-radio>\n\t\t</cds-radio-group>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -69438,7 +69689,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "Story<ExpandableTile>",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-expandable-tile>\n\t\t\t<span class=\"cds--tile-content__above-the-fold\" style=\"height: 200px\">Above the fold content here</span>\n\t\t\t<span class=\"cds--tile-content__below-the-fold\" style=\"height: 400px\">Below the fold content here</span>\n\t\t</cds-expandable-tile>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-expandable-tile>\n\t\t\t<span cdsAboveFold style=\"height: 200px\">Above the fold content here</span>\n\t\t\t<span cdsBelowFold style=\"height: 400px\">Below the fold content here</span>\n\t\t</cds-expandable-tile>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -73665,7 +73916,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "Story<Radio>",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t<fieldset class=\"cds--fieldset\">\n\t\t<legend class=\"cds--label\">{{label}}</legend>\n\t\t<cds-radio-group\n\t\t\t[disabled]=\"disabled\"\n\t\t\taria-label=\"radiogroup\"\n\t\t\t[orientation]=\"orientation\"\n\t\t\t[labelPlacement]=\"labelPlacement\"\n\t\t\t(change)=\"onChange($event)\">\n\t\t\t<cds-radio value=\"Zero\" [checked]=\"true\">\n\t\t\t\tZero\n\t\t\t</cds-radio>\n\t\t\t<cds-radio [value]=\"One\">One</cds-radio>\n\t\t\t<cds-radio [value]=\"Two\">Two</cds-radio>\n\t\t\t<cds-radio [value]=\"Three\">Three</cds-radio>\n\t\t\t<cds-radio [value]=\"Four\" [disabled]=\"true\">Four</cds-radio>\n\t\t</cds-radio-group>\n\t</fieldset>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-radio-group\n\t\t\t[legend]=\"label\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\tariaLabel=\"radiogroup\"\n\t\t\t[orientation]=\"orientation\"\n\t\t\t[labelPlacement]=\"labelPlacement\"\n\t\t\t(change)=\"onChange($event)\">\n\t\t\t<cds-radio value=\"Zero\" [checked]=\"true\">\n\t\t\t\tZero\n\t\t\t</cds-radio>\n\t\t\t<cds-radio [value]=\"One\">One</cds-radio>\n\t\t\t<cds-radio [value]=\"Two\">Two</cds-radio>\n\t\t\t<cds-radio [value]=\"Three\">Three</cds-radio>\n\t\t\t<cds-radio [value]=\"Four\" [disabled]=\"true\">Four</cds-radio>\n\t\t</cds-radio-group>\n\t`\n})"
                 }
             ],
             "src/search/search.stories.ts": [
@@ -74449,6 +74700,26 @@
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
+                {
+                    "name": "Interactive",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tiles/expandable-tile.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "InteractiveTemplate.bind({})"
+                },
+                {
+                    "name": "InteractiveTemplate",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tiles/expandable-tile.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story<ExpandableTile>",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-expandable-tile [interactive]=\"true\">\n\t\t\t<span cdsAboveFold style=\"height: 200px\">\n\t\t\t\tAbove the fold content\n\t\t\t\t<button ibmButton>Click me!</button>\n\t\t\t</span>\n\t\t\t<span cdsBelowFold style=\"height: 400px\">\n\t\t\t\tBelow the fold content here\n\t\t\t\t<button ibmButton>No me!</button>\n\t\t\t</span>\n\t\t</cds-expandable-tile>\n\t`\n})"
+                },
                 {
                     "name": "LayerTemplate",
                     "ctype": "miscellaneous",
@@ -74457,7 +74728,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "Story<ExpandableTile>",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-expandable-tile>\n\t\t\t<span class=\"cds--tile-content__above-the-fold\" style=\"height: 200px\">\n\t\t\t\tFirst Layer, above the fold content here\n\t\t\t</span>\n\t\t\t<span class=\"cds--tile-content__below-the-fold\" style=\"height: 400px\">\n\t\t\t\tFirst Layer, below the fold content here\n\t\t\t</span>\n\t\t</cds-expandable-tile>\n\t\t<div cdsLayer>\n\t\t\t<cds-expandable-tile>\n\t\t\t\t<span class=\"cds--tile-content__above-the-fold\" style=\"height: 200px\">\n\t\t\t\t\tSecond layer, above the fold content here\n\t\t\t\t</span>\n\t\t\t\t<span class=\"cds--tile-content__below-the-fold\" style=\"height: 400px\">\n\t\t\t\t\tSecond layer, below the fold content here\n\t\t\t\t</span>\n\t\t\t</cds-expandable-tile>\n\t\t\t<div cdsLayer>\n\t\t\t\t<cds-expandable-tile>\n\t\t\t\t\t<span class=\"cds--tile-content__above-the-fold\" style=\"height: 200px\">\n\t\t\t\t\t\tThird layer, above the fold content here\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"cds--tile-content__below-the-fold\" style=\"height: 400px\">\n\t\t\t\t\t\tThird layer, below the fold content here\n\t\t\t\t\t</span>\n\t\t\t\t</cds-expandable-tile>\n\t\t\t</div>\n\t\t</div>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-expandable-tile>\n\t\t\t<span cdsAboveFold style=\"height: 200px\">\n\t\t\t\tFirst Layer, above the fold content here\n\t\t\t</span>\n\t\t\t<span cdsBelowFold style=\"height: 400px\">\n\t\t\t\tFirst Layer, below the fold content here\n\t\t\t</span>\n\t\t</cds-expandable-tile>\n\t\t<div cdsLayer>\n\t\t\t<cds-expandable-tile>\n\t\t\t\t<span cdsAboveFold style=\"height: 200px\">\n\t\t\t\t\tSecond layer, above the fold content here\n\t\t\t\t</span>\n\t\t\t\t<span cdsBelowFold style=\"height: 400px\">\n\t\t\t\t\tSecond layer, below the fold content here\n\t\t\t\t</span>\n\t\t\t</cds-expandable-tile>\n\t\t\t<div cdsLayer>\n\t\t\t\t<cds-expandable-tile>\n\t\t\t\t\t<span cdsAboveFold style=\"height: 200px\">\n\t\t\t\t\t\tThird layer, above the fold content here\n\t\t\t\t\t</span>\n\t\t\t\t\t<span cdsBelowFold style=\"height: 400px\">\n\t\t\t\t\t\tThird layer, below the fold content here\n\t\t\t\t\t</span>\n\t\t\t\t</cds-expandable-tile>\n\t\t\t</div>\n\t\t</div>\n\t`\n})"
                 },
                 {
                     "name": "Template",
@@ -74467,7 +74738,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "Story<ExpandableTile>",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-expandable-tile>\n\t\t\t<span class=\"cds--tile-content__above-the-fold\" style=\"height: 200px\">Above the fold content here</span>\n\t\t\t<span class=\"cds--tile-content__below-the-fold\" style=\"height: 400px\">Below the fold content here</span>\n\t\t</cds-expandable-tile>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-expandable-tile>\n\t\t\t<span cdsAboveFold style=\"height: 200px\">Above the fold content here</span>\n\t\t\t<span cdsBelowFold style=\"height: 400px\">Below the fold content here</span>\n\t\t</cds-expandable-tile>\n\t`\n})"
                 },
                 {
                     "name": "WithLayers",
@@ -80623,8 +80894,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "RadioGroup",
-                "coveragePercent": 85,
-                "coverageCount": "23/27",
+                "coveragePercent": 82,
+                "coverageCount": "28/34",
                 "status": "very-good"
             },
             {
@@ -82116,13 +82387,31 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/tiles/expandable-tile-above.directive.ts",
+                "type": "directive",
+                "linktype": "directive",
+                "name": "ExpandableTileAboveFoldDirective",
+                "coveragePercent": 0,
+                "coverageCount": "0/3",
+                "status": "low"
+            },
+            {
+                "filePath": "src/tiles/expandable-tile-below.directive.ts",
+                "type": "directive",
+                "linktype": "directive",
+                "name": "ExpandableTileBelowFoldDirective",
+                "coveragePercent": 0,
+                "coverageCount": "0/3",
+                "status": "low"
+            },
             {
                 "filePath": "src/tiles/expandable-tile.component.ts",
                 "type": "component",
                 "linktype": "component",
                 "name": "ExpandableTile",
-                "coveragePercent": 8,
-                "coverageCount": "1/12",
+                "coveragePercent": 23,
+                "coverageCount": "3/13",
                 "status": "low"
             },
             {
@@ -82144,6 +82433,26 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/tiles/expandable-tile.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Interactive",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/tiles/expandable-tile.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "InteractiveTemplate",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/tiles/expandable-tile.stories.ts",
                 "type": "variable",