carbon-components-angular 5.9.2 → 5.10.0

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
                     }
                 }
             }
@@ -65938,13 +66061,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 +66082,12 @@
                         {
                             "name": "ExpandableTile"
                         },
+                        {
+                            "name": "ExpandableTileAboveFoldDirective"
+                        },
+                        {
+                            "name": "ExpandableTileBelowFoldDirective"
+                        },
                         {
                             "name": "SelectionTile"
                         },
@@ -65976,6 +66105,9 @@
                         {
                             "name": "I18nModule"
                         },
+                        {
+                            "name": "IconModule"
+                        },
                         {
                             "name": "LinkModule"
                         }
@@ -65990,6 +66122,12 @@
                         {
                             "name": "ExpandableTile"
                         },
+                        {
+                            "name": "ExpandableTileAboveFoldDirective"
+                        },
+                        {
+                            "name": "ExpandableTileBelowFoldDirective"
+                        },
                         {
                             "name": "SelectionTile"
                         },
@@ -67729,6 +67867,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 +67949,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",
@@ -69438,7 +69596,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",
@@ -74449,6 +74607,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 +74635,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 +74645,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",
@@ -82116,13 +82294,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 +82340,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",