npm - carbon-components-angular - Versions diffs - 5.23.3 → 5.24.1 - Mend

carbon-components-angular 5.23.3 → 5.24.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/docs/documentation.json CHANGED Viewed

@@ -19152,7 +19152,7 @@
         },
         {
             "name": "BaseIconButton",
-            "id": "component-BaseIconButton-1bbf88da3d073e049175792fa4e8f6ceccc74b46ec3567e29f5cc10147596cb44b07275e8ea4e146121f76fb7f55761ae607f6b3924405aaebd2c08dc325632d",
+            "id": "component-BaseIconButton-77320a539d11df15c9cb5571f9c9d27fcc37267e8409207c56d2ad54688ab81ce690c41acb6b40aa3db648a7b449c2a92435fce701b979c3de693c5ffaa5f1ff",
             "file": "src/button/base-icon-button.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -19177,6 +19177,17 @@
                     "type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
                     "decorators": []
                 },
+                {
+                    "name": "autoAlign",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\n**Experimental**: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once\n",
+                    "description": "<p><strong>Experimental</strong>: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once</p>\n",
+                    "line": 40,
+                    "type": "boolean",
+                    "decorators": []
+                },
                 {
                     "name": "caret",
                     "defaultValue": "true",
@@ -19206,7 +19217,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet delay before tooltip is shown\n",
                     "description": "<p>Set delay before tooltip is shown</p>\n",
-                    "line": 39,
+                    "line": 44,
                     "type": "number",
                     "decorators": []
                 },
@@ -19239,7 +19250,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet delay when tooltip disappears\n",
                     "description": "<p>Set delay when tooltip disappears</p>\n",
-                    "line": 43,
+                    "line": 48,
                     "type": "number",
                     "decorators": []
                 }
@@ -19256,7 +19267,7 @@
             "description": "<p>Base button with common input properties for configuring icon button.\nExtend class to inherit @Input meta data</p>\n<p>Used by pagination nav icon button, code snippet, etc.</p>\n",
             "rawdescription": "\n\nBase button with common input properties for configuring icon button.\nExtend class to inherit @Input meta data\n\nUsed by pagination nav icon button, code snippet, etc.\n",
             "type": "component",
-            "sourceCode": "import { Component, Input } from \"@angular/core\";\n\n/**\n * Base button with common input properties for configuring icon button.\n * Extend class to inherit @Input meta data\n *\n * Used by pagination nav icon button, code snippet, etc.\n */\n@Component({\n\ttemplate: \"\"\n})\nexport class BaseIconButton {\n\t/**\n\t * Set to `false` to hide caret\n\t */\n\t@Input() caret = true;\n\t/**\n\t * Set to `false` to hide shadow\n\t */\n\t@Input() dropShadow = true;\n\t/**\n\t * Set to `true` to enable high contrast\n\t */\n\t@Input() highContrast = true;\n\t/**\n\t * Set to `true` to have the popover open by default\n\t */\n\t@Input() isOpen = false;\n\t/**\n\t * Set popover alignment\n\t */\n\t@Input() align: \"top\" | \"top-left\" | \"top-right\" |\n\t\t\"bottom\" | \"bottom-left\" | \"bottom-right\" |\n\t\t\"left\" | \"left-bottom\" | \"left-top\" |\n\t\t\"right\" | \"right-bottom\" | \"right-top\" = \"bottom\";\n\t/**\n\t * Set delay before tooltip is shown\n\t */\n\t@Input() enterDelayMs = 100;\n\t/**\n\t * Set delay when tooltip disappears\n\t */\n\t@Input() leaveDelayMs = 300;\n}\n",
+            "sourceCode": "import { Component, Input } from \"@angular/core\";\n\n/**\n * Base button with common input properties for configuring icon button.\n * Extend class to inherit @Input meta data\n *\n * Used by pagination nav icon button, code snippet, etc.\n */\n@Component({\n\ttemplate: \"\"\n})\nexport class BaseIconButton {\n\t/**\n\t * Set to `false` to hide caret\n\t */\n\t@Input() caret = true;\n\t/**\n\t * Set to `false` to hide shadow\n\t */\n\t@Input() dropShadow = true;\n\t/**\n\t * Set to `true` to enable high contrast\n\t */\n\t@Input() highContrast = true;\n\t/**\n\t * Set to `true` to have the popover open by default\n\t */\n\t@Input() isOpen = false;\n\t/**\n\t * Set popover alignment\n\t */\n\t@Input() align: \"top\" | \"top-left\" | \"top-right\" |\n\t\t\"bottom\" | \"bottom-left\" | \"bottom-right\" |\n\t\t\"left\" | \"left-bottom\" | \"left-top\" |\n\t\t\"right\" | \"right-bottom\" | \"right-top\" = \"bottom\";\n\t/**\n\t * **Experimental**: Use floating-ui to position the tooltip\n\t * This is not toggleable - should be assigned once\n\t */\n\t@Input() autoAlign = false;\n\t/**\n\t * Set delay before tooltip is shown\n\t */\n\t@Input() enterDelayMs = 100;\n\t/**\n\t * Set delay when tooltip disappears\n\t */\n\t@Input() leaveDelayMs = 300;\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": ""
@@ -21624,6 +21635,20 @@
                         "file": "BaseIconButton"
                     }
                 },
+                {
+                    "name": "autoAlign",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\n**Experimental**: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once\n",
+                    "description": "<p><strong>Experimental</strong>: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once</p>\n",
+                    "line": 40,
+                    "type": "boolean",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "BaseIconButton"
+                    }
+                },
                 {
                     "name": "caret",
                     "defaultValue": "true",
@@ -21659,7 +21684,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet delay before tooltip is shown\n",
                     "description": "<p>Set delay before tooltip is shown</p>\n",
-                    "line": 39,
+                    "line": 44,
                     "type": "number",
                     "decorators": [],
                     "inheritance": {
@@ -21701,7 +21726,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet delay when tooltip disappears\n",
                     "description": "<p>Set delay when tooltip disappears</p>\n",
-                    "line": 43,
+                    "line": 48,
                     "type": "number",
                     "decorators": [],
                     "inheritance": {
@@ -32201,6 +32226,20 @@
                         "file": "BaseIconButton"
                     }
                 },
+                {
+                    "name": "autoAlign",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\n**Experimental**: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once\n",
+                    "description": "<p><strong>Experimental</strong>: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once</p>\n",
+                    "line": 40,
+                    "type": "boolean",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "BaseIconButton"
+                    }
+                },
                 {
                     "name": "caret",
                     "defaultValue": "true",
@@ -32236,7 +32275,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet delay before tooltip is shown\n",
                     "description": "<p>Set delay before tooltip is shown</p>\n",
-                    "line": 39,
+                    "line": 44,
                     "type": "number",
                     "decorators": [],
                     "inheritance": {
@@ -32278,7 +32317,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet delay when tooltip disappears\n",
                     "description": "<p>Set delay when tooltip disappears</p>\n",
-                    "line": 43,
+                    "line": 48,
                     "type": "number",
                     "decorators": [],
                     "inheritance": {
@@ -33181,7 +33220,7 @@
         },
         {
             "name": "IconButton",
-            "id": "component-IconButton-290b4dc2b63906492f7f9508b27c36c260c43cf1c3474e765d4bad33889abca73e397fe962da2dface89a40e9e709e8d6b433153a6ee719ef605a515b29ef987",
+            "id": "component-IconButton-51758ccc9548e4288883169b57e7512220d12ca16445c4ff51c7084ae4ed320f3b06fa92fa97371db2f37ae1f7207df0e9f0fe205c83199eccd69b4a6c1a8f59",
             "file": "src/button/icon-button.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -33191,7 +33230,7 @@
             "selector": "cds-icon-button, ibm-icon-button",
             "styleUrls": [],
             "styles": [],
-            "template": "<cds-tooltip\n\tclass=\"cds--icon-tooltip\"\n\t[description]=\"description\"\n\t[disabled]=\"disabled\"\n\t[caret]=\"caret\"\n\t[dropShadow]=\"dropShadow\"\n\t[highContrast]=\"highContrast\"\n\t[isOpen]=\"isOpen\"\n\t[align]=\"align\"\n\t[enterDelayMs]=\"enterDelayMs\"\n\t[leaveDelayMs]=\"leaveDelayMs\"\n\t(click)=\"emitClickEvent($event, 'tooltip')\">\n\t<button\n\t\t#button\n\t\t[id]=\"buttonId\"\n\t\t[disabled]=\"disabled\"\n\t\t[attr.type]=\"type\"\n\t\t[iconOnly]=\"true\"\n\t\t[ngClass]=\"buttonNgClass\"\n\t\t[cdsButton]=\"kind\"\n\t\t[size]=\"size\"\n\t\t[isExpressive]=\"isExpressive\"\n\t\t(click)=\"emitClickEvent($event)\"\n\t\t(focus)=\"focus.emit($event)\"\n\t\t(blur)=\"blur.emit($event)\">\n\t\t<ng-content></ng-content>\n\t</button>\n</cds-tooltip>\n",
+            "template": "<cds-tooltip\n\tclass=\"cds--icon-tooltip\"\n\t[description]=\"description\"\n\t[disabled]=\"disabled\"\n\t[caret]=\"caret\"\n\t[dropShadow]=\"dropShadow\"\n\t[highContrast]=\"highContrast\"\n\t[isOpen]=\"isOpen\"\n\t[align]=\"align\"\n\t[autoAlign]=\"autoAlign\"\n\t[enterDelayMs]=\"enterDelayMs\"\n\t[leaveDelayMs]=\"leaveDelayMs\"\n\t(click)=\"emitClickEvent($event, 'tooltip')\">\n\t<button\n\t\t#button\n\t\t[id]=\"buttonId\"\n\t\t[disabled]=\"disabled\"\n\t\t[attr.type]=\"type\"\n\t\t[iconOnly]=\"true\"\n\t\t[ngClass]=\"buttonNgClass\"\n\t\t[cdsButton]=\"kind\"\n\t\t[size]=\"size\"\n\t\t[isExpressive]=\"isExpressive\"\n\t\t(click)=\"emitClickEvent($event)\"\n\t\t(focus)=\"focus.emit($event)\"\n\t\t(blur)=\"blur.emit($event)\">\n\t\t<ng-content></ng-content>\n\t</button>\n</cds-tooltip>\n",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -33202,15 +33241,15 @@
                     "deprecationMessage": "",
                     "jsdoctags": [
                         {
-                            "pos": 1581,
-                            "end": 1787,
+                            "pos": 1607,
+                            "end": 1813,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 344,
                             "tagName": {
-                                "pos": 1582,
-                                "end": 1587,
+                                "pos": 1608,
+                                "end": 1613,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -33219,8 +33258,8 @@
                             },
                             "comment": "<p>: { [key: string]: string\nUser can pass additional button attributes if component property does not already exist\nKey is the attribute name &amp; value is the attribute value for the button</p>\n",
                             "name": {
-                                "pos": 1588,
-                                "end": 1591,
+                                "pos": 1614,
+                                "end": 1617,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -33231,7 +33270,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 74,
+                    "line": 75,
                     "type": "literal type",
                     "decorators": []
                 },
@@ -33242,7 +33281,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOverride id\n",
                     "description": "<p>Override id</p>\n",
-                    "line": 100,
+                    "line": 101,
                     "type": "string",
                     "decorators": []
                 },
@@ -33252,7 +33291,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nPass global carbon classes to icon button\n",
                     "description": "<p>Pass global carbon classes to icon button</p>\n",
-                    "line": 61,
+                    "line": 62,
                     "type": "literal type",
                     "decorators": []
                 },
@@ -33262,7 +33301,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe string or template content to be exposed by the tooltip.\n",
                     "description": "<p>The string or template content to be exposed by the tooltip.</p>\n",
-                    "line": 124,
+                    "line": 125,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -33273,7 +33312,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to disable button\n",
                     "description": "<p>Set to <code>true</code> to disable button</p>\n",
-                    "line": 120,
+                    "line": 121,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -33284,7 +33323,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to make button expressive\n",
                     "description": "<p>Set to <code>true</code> to make button expressive</p>\n",
-                    "line": 116,
+                    "line": 117,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -33295,7 +33334,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the button type.\n",
                     "description": "<p>Sets the button type.</p>\n",
-                    "line": 104,
+                    "line": 105,
                     "type": "ButtonType",
                     "decorators": []
                 },
@@ -33306,7 +33345,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecify the size of the button.\n",
                     "description": "<p>Specify the size of the button.</p>\n",
-                    "line": 108,
+                    "line": 109,
                     "type": "ButtonSize",
                     "decorators": []
                 },
@@ -33317,7 +33356,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet button type, `button` by default\n",
                     "description": "<p>Set button type, <code>button</code> by default</p>\n",
-                    "line": 112,
+                    "line": 113,
                     "type": "string",
                     "decorators": []
                 },
@@ -33335,6 +33374,20 @@
                         "file": "BaseIconButton"
                     }
                 },
+                {
+                    "name": "autoAlign",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\n**Experimental**: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once\n",
+                    "description": "<p><strong>Experimental</strong>: Use floating-ui to position the tooltip\nThis is not toggleable - should be assigned once</p>\n",
+                    "line": 40,
+                    "type": "boolean",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "BaseIconButton"
+                    }
+                },
                 {
                     "name": "caret",
                     "defaultValue": "true",
@@ -33370,7 +33423,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet delay before tooltip is shown\n",
                     "description": "<p>Set delay before tooltip is shown</p>\n",
-                    "line": 39,
+                    "line": 44,
                     "type": "number",
                     "decorators": [],
                     "inheritance": {
@@ -33412,7 +33465,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet delay when tooltip disappears\n",
                     "description": "<p>Set delay when tooltip disappears</p>\n",
-                    "line": 43,
+                    "line": 48,
                     "type": "number",
                     "decorators": [],
                     "inheritance": {
@@ -33426,7 +33479,7 @@
                     "defaultValue": "new EventEmitter<Event>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 131,
+                    "line": 132,
                     "type": "EventEmitter"
                 },
                 {
@@ -33436,7 +33489,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCommon button events\n",
                     "description": "<p>Common button events</p>\n",
-                    "line": 129,
+                    "line": 130,
                     "type": "EventEmitter"
                 },
                 {
@@ -33444,7 +33497,7 @@
                     "defaultValue": "new EventEmitter<Event>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 130,
+                    "line": 131,
                     "type": "EventEmitter"
                 },
                 {
@@ -33454,7 +33507,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEvent to emit when click event is fired from tooltip\n",
                     "description": "<p>Event to emit when click event is fired from tooltip</p>\n",
-                    "line": 135,
+                    "line": 136,
                     "type": "EventEmitter"
                 }
             ],
@@ -33466,7 +33519,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 95,
+                    "line": 96,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -33485,7 +33538,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 93,
+                    "line": 94,
                     "modifierKind": [
                         124
                     ]
@@ -33512,7 +33565,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 153,
+                    "line": 154,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nStop propogation of click event\nElse double fires (click) event\n",
@@ -33549,7 +33602,7 @@
             "description": "<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ButtonModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-button-icon-button--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ButtonModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-button-icon-button--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tElementRef,\n\tEventEmitter,\n\tInput,\n\tOutput,\n\tRenderer2,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { BaseIconButton } from \"./base-icon-button.component\";\nimport { ButtonSize, ButtonType } from \"./button.types\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ButtonModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-button-icon-button--basic)\n */\n@Component({\n\tselector: \"cds-icon-button, ibm-icon-button\",\n\ttemplate: `\n\t<cds-tooltip\n\t\tclass=\"cds--icon-tooltip\"\n\t\t[description]=\"description\"\n\t\t[disabled]=\"disabled\"\n\t\t[caret]=\"caret\"\n\t\t[dropShadow]=\"dropShadow\"\n\t\t[highContrast]=\"highContrast\"\n\t\t[isOpen]=\"isOpen\"\n\t\t[align]=\"align\"\n\t\t[enterDelayMs]=\"enterDelayMs\"\n\t\t[leaveDelayMs]=\"leaveDelayMs\"\n\t\t(click)=\"emitClickEvent($event, 'tooltip')\">\n\t\t<button\n\t\t\t#button\n\t\t\t[id]=\"buttonId\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[attr.type]=\"type\"\n\t\t\t[iconOnly]=\"true\"\n\t\t\t[ngClass]=\"buttonNgClass\"\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t(click)=\"emitClickEvent($event)\"\n\t\t\t(focus)=\"focus.emit($event)\"\n\t\t\t(blur)=\"blur.emit($event)\">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t</cds-tooltip>\n\t`\n})\nexport class IconButton extends BaseIconButton implements AfterViewInit {\n\t/**\n\t * Pass global carbon classes to icon button\n\t */\n\t@Input() set buttonNgClass(obj: { [key: string]: boolean }) {\n\t\tthis.classList = Object.assign({ \"cds--btn--disabled\": this.disabled }, obj);\n\t}\n\n\tget buttonNgClass() {\n\t\treturn this.classList;\n\t}\n\n\t/**\n\t * @param obj: { [key: string]: string\n\t * User can pass additional button attributes if component property does not already exist\n\t * Key is the attribute name & value is the attribute value for the button\n\t */\n\t@Input() set buttonAttributes(obj: { [key: string]: string }) {\n\t\tif (this.button) {\n\t\t\t// Remove old attributes\n\t\t\tObject.keys(this.attributeList).forEach((key: string) => {\n\t\t\t\tthis.renderer.removeAttribute(this.button.nativeElement, key);\n\t\t\t});\n\t\t\t// Set new attributes\n\t\t\tObject.keys(obj).forEach((key: string) => {\n\t\t\t\tthis.renderer.setAttribute(this.button.nativeElement, key, obj[key]);\n\t\t\t});\n\t\t}\n\t\t// Set new attributes\n\t\tthis.attributeList = obj;\n\t}\n\n\tget buttonAttributes() {\n\t\treturn this.buttonAttributes;\n\t}\n\n\tstatic iconButtonCounter = 0;\n\n\t@ViewChild(\"button\") button: ElementRef;\n\n\t/**\n\t * Override id\n\t */\n\t@Input() buttonId = `icon-btn-${IconButton.iconButtonCounter++}`;\n\t/**\n\t * Sets the button type.\n\t */\n\t@Input() kind: ButtonType = \"primary\";\n\t/**\n\t * Specify the size of the button.\n\t */\n\t@Input() size: ButtonSize = \"lg\";\n\t/**\n\t * Set button type, `button` by default\n\t */\n\t@Input() type = \"button\";\n\t/**\n\t * Set to `true` to make button expressive\n\t */\n\t@Input() isExpressive = false;\n\t/**\n\t * Set to `true` to disable button\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * The string or template content to be exposed by the tooltip.\n\t */\n\t@Input() description: string | TemplateRef<any>;\n\n\t/**\n\t * Common button events\n\t */\n\t@Output() click = new EventEmitter<Event>();\n\t@Output() focus = new EventEmitter<Event>();\n\t@Output() blur = new EventEmitter<Event>();\n\t/**\n\t * Event to emit when click event is fired from tooltip\n\t */\n\t@Output() tooltipClick = new EventEmitter<Event>();\n\n\tprivate classList: { [key: string]: boolean } = {};\n\tprivate attributeList: { [key: string]: string } = {};\n\n\tconstructor(private renderer: Renderer2) {\n\t\tsuper();\n\t}\n\n\tngAfterViewInit(): void {\n\t\t// Set attributes once element is found\n\t\tthis.buttonAttributes = this.attributeList;\n\t}\n\n\t/**\n\t * Stop propogation of click event\n\t * Else double fires (click) event\n\t */\n\temitClickEvent(event, element: \"tooltip\" | \"button\" = \"button\") {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\t// Prevents (click) event from bubbling since it would appear user clicked the `button`\n\t\tif (element === \"tooltip\") {\n\t\t\tthis.tooltipClick.emit(event);\n\t\t\treturn;\n\t\t}\n\t\tthis.click.emit(event);\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tElementRef,\n\tEventEmitter,\n\tInput,\n\tOutput,\n\tRenderer2,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { BaseIconButton } from \"./base-icon-button.component\";\nimport { ButtonSize, ButtonType } from \"./button.types\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ButtonModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-button-icon-button--basic)\n */\n@Component({\n\tselector: \"cds-icon-button, ibm-icon-button\",\n\ttemplate: `\n\t<cds-tooltip\n\t\tclass=\"cds--icon-tooltip\"\n\t\t[description]=\"description\"\n\t\t[disabled]=\"disabled\"\n\t\t[caret]=\"caret\"\n\t\t[dropShadow]=\"dropShadow\"\n\t\t[highContrast]=\"highContrast\"\n\t\t[isOpen]=\"isOpen\"\n\t\t[align]=\"align\"\n\t\t[autoAlign]=\"autoAlign\"\n\t\t[enterDelayMs]=\"enterDelayMs\"\n\t\t[leaveDelayMs]=\"leaveDelayMs\"\n\t\t(click)=\"emitClickEvent($event, 'tooltip')\">\n\t\t<button\n\t\t\t#button\n\t\t\t[id]=\"buttonId\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[attr.type]=\"type\"\n\t\t\t[iconOnly]=\"true\"\n\t\t\t[ngClass]=\"buttonNgClass\"\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t(click)=\"emitClickEvent($event)\"\n\t\t\t(focus)=\"focus.emit($event)\"\n\t\t\t(blur)=\"blur.emit($event)\">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t</cds-tooltip>\n\t`\n})\nexport class IconButton extends BaseIconButton implements AfterViewInit {\n\t/**\n\t * Pass global carbon classes to icon button\n\t */\n\t@Input() set buttonNgClass(obj: { [key: string]: boolean }) {\n\t\tthis.classList = Object.assign({ \"cds--btn--disabled\": this.disabled }, obj);\n\t}\n\n\tget buttonNgClass() {\n\t\treturn this.classList;\n\t}\n\n\t/**\n\t * @param obj: { [key: string]: string\n\t * User can pass additional button attributes if component property does not already exist\n\t * Key is the attribute name & value is the attribute value for the button\n\t */\n\t@Input() set buttonAttributes(obj: { [key: string]: string }) {\n\t\tif (this.button) {\n\t\t\t// Remove old attributes\n\t\t\tObject.keys(this.attributeList).forEach((key: string) => {\n\t\t\t\tthis.renderer.removeAttribute(this.button.nativeElement, key);\n\t\t\t});\n\t\t\t// Set new attributes\n\t\t\tObject.keys(obj).forEach((key: string) => {\n\t\t\t\tthis.renderer.setAttribute(this.button.nativeElement, key, obj[key]);\n\t\t\t});\n\t\t}\n\t\t// Set new attributes\n\t\tthis.attributeList = obj;\n\t}\n\n\tget buttonAttributes() {\n\t\treturn this.buttonAttributes;\n\t}\n\n\tstatic iconButtonCounter = 0;\n\n\t@ViewChild(\"button\") button: ElementRef;\n\n\t/**\n\t * Override id\n\t */\n\t@Input() buttonId = `icon-btn-${IconButton.iconButtonCounter++}`;\n\t/**\n\t * Sets the button type.\n\t */\n\t@Input() kind: ButtonType = \"primary\";\n\t/**\n\t * Specify the size of the button.\n\t */\n\t@Input() size: ButtonSize = \"lg\";\n\t/**\n\t * Set button type, `button` by default\n\t */\n\t@Input() type = \"button\";\n\t/**\n\t * Set to `true` to make button expressive\n\t */\n\t@Input() isExpressive = false;\n\t/**\n\t * Set to `true` to disable button\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * The string or template content to be exposed by the tooltip.\n\t */\n\t@Input() description: string | TemplateRef<any>;\n\n\t/**\n\t * Common button events\n\t */\n\t@Output() click = new EventEmitter<Event>();\n\t@Output() focus = new EventEmitter<Event>();\n\t@Output() blur = new EventEmitter<Event>();\n\t/**\n\t * Event to emit when click event is fired from tooltip\n\t */\n\t@Output() tooltipClick = new EventEmitter<Event>();\n\n\tprivate classList: { [key: string]: boolean } = {};\n\tprivate attributeList: { [key: string]: string } = {};\n\n\tconstructor(private renderer: Renderer2) {\n\t\tsuper();\n\t}\n\n\tngAfterViewInit(): void {\n\t\t// Set attributes once element is found\n\t\tthis.buttonAttributes = this.attributeList;\n\t}\n\n\t/**\n\t * Stop propogation of click event\n\t * Else double fires (click) event\n\t */\n\temitClickEvent(event, element: \"tooltip\" | \"button\" = \"button\") {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\t// Prevents (click) event from bubbling since it would appear user clicked the `button`\n\t\tif (element === \"tooltip\") {\n\t\t\tthis.tooltipClick.emit(event);\n\t\t\treturn;\n\t\t}\n\t\tthis.click.emit(event);\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -33566,7 +33619,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 138,
+                "line": 139,
                 "jsdoctags": [
                     {
                         "name": "renderer",
@@ -33600,7 +33653,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 61,
+                        "line": 62,
                         "rawdescription": "\n\nPass global carbon classes to icon button\n",
                         "description": "<p>Pass global carbon classes to icon button</p>\n",
                         "jsdoctags": [
@@ -33619,7 +33672,7 @@
                         "name": "buttonNgClass",
                         "type": "",
                         "returnType": "",
-                        "line": 65
+                        "line": 66
                     }
                 },
                 "buttonAttributes": {
@@ -33638,14 +33691,14 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 74,
+                        "line": 75,
                         "rawdescription": "\n\nUser can pass additional button attributes if component property does not already exist\nKey is the attribute name & value is the attribute value for the button\n",
                         "description": "<p>User can pass additional button attributes if component property does not already exist\nKey is the attribute name &amp; value is the attribute value for the button</p>\n",
                         "jsdoctags": [
                             {
                                 "name": {
-                                    "pos": 1588,
-                                    "end": 1591,
+                                    "pos": 1614,
+                                    "end": 1617,
                                     "flags": 8421376,
                                     "modifierFlagsCache": 0,
                                     "transformFlags": 0,
@@ -33656,8 +33709,8 @@
                                 "deprecated": false,
                                 "deprecationMessage": "",
                                 "tagName": {
-                                    "pos": 1582,
-                                    "end": 1587,
+                                    "pos": 1608,
+                                    "end": 1613,
                                     "flags": 8421376,
                                     "modifierFlagsCache": 0,
                                     "transformFlags": 0,
@@ -33672,7 +33725,7 @@
                         "name": "buttonAttributes",
                         "type": "",
                         "returnType": "",
-                        "line": 89
+                        "line": 90
                     }
                 }
             }
@@ -63164,7 +63217,7 @@
         },
         {
             "name": "Tooltip",
-            "id": "component-Tooltip-2a115ad9bdda7bb6365ae6c9e0c90dc5c7ffd93bebb4dc37938aec4f377077e2db1e7a6d222fe5a29c5fadb802bed62afd2afc74592a2e1843e4afb217ddd12e",
+            "id": "component-Tooltip-b05f70d91e0b1e4e7996f80176a7fa35743d84f421794ac0b0bcbd9890bea0f7563afa1aee0c07f0759c6d4d618679d25249ddcff9135e610623d85138f11f7d",
             "file": "src/tooltip/tooltip.component.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -63175,7 +63228,7 @@
             "selector": "cds-tooltip, ibm-tooltip",
             "styleUrls": [],
             "styles": [],
-            "template": "<span #contentWrapper>\n\t<ng-content></ng-content>\n</span>\n<span\n\t*ngIf=\"description\"\n\tclass=\"cds--popover\"\n\t[id]=\"id\"\n\t[attr.aria-hidden]=\"!isOpen\"\n\trole=\"tooltip\">\n\t<ng-container *ngIf=\"!disabled\">\n\t\t<span class=\"cds--popover-content cds--tooltip-content\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(description)\">{{description}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(description)\" [ngTemplateOutlet]=\"description\"></ng-template>\n\t\t\t<span *ngIf=\"autoAlign\" class=\"cds--popover-caret cds--popover--auto-align\"></span>\n\t\t</span>\n\t\t<span *ngIf=\"!autoAlign\" class=\"cds--popover-caret\"></span>\n\t</ng-container>\n</span>\n\t",
+            "template": "<span #contentWrapper>\n\t<ng-content></ng-content>\n</span>\n<span\n\t*ngIf=\"description\"\n\tclass=\"cds--popover\"\n\t[id]=\"id\"\n\t[attr.aria-hidden]=\"!isOpen\"\n\trole=\"tooltip\">\n\t<ng-container *ngIf=\"!disabled\">\n\t\t<span class=\"cds--popover-content cds--tooltip-content\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(description)\">{{description}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(description)\" [ngTemplateOutlet]=\"description\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"></ng-template>\n\t\t\t<span *ngIf=\"autoAlign\" class=\"cds--popover-caret cds--popover--auto-align\"></span>\n\t\t</span>\n\t\t<span *ngIf=\"!autoAlign\" class=\"cds--popover-caret\"></span>\n\t</ng-container>\n</span>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -63232,6 +63285,16 @@
                     "type": "number",
                     "decorators": []
                 },
+                {
+                    "name": "templateContext",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nOptional data for templates passed as implicit context\n",
+                    "description": "<p>Optional data for templates passed as implicit context</p>\n",
+                    "line": 75,
+                    "type": "any",
+                    "decorators": []
+                },
                 {
                     "name": "align",
                     "deprecated": false,
@@ -63395,7 +63458,7 @@
                     "type": "ElementRef<HTMLSpanElement>",
                     "optional": false,
                     "description": "",
-                    "line": 73,
+                    "line": 77,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -63472,7 +63535,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 110,
+                    "line": 114,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -63509,7 +63572,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 115,
+                    "line": 119,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -63546,7 +63609,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 101,
+                    "line": 105,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -63583,7 +63646,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 119,
+                    "line": 123,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -63611,7 +63674,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 87,
+                    "line": 91,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -63648,7 +63711,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 94,
+                    "line": 98,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -63933,7 +63996,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 110
+                    "line": 114
                 },
                 {
                     "name": "focusout",
@@ -63950,7 +64013,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 115
+                    "line": 119
                 },
                 {
                     "name": "keyup",
@@ -63967,7 +64030,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 101
+                    "line": 105
                 },
                 {
                     "name": "mouseenter",
@@ -63984,7 +64047,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 87
+                    "line": 91
                 },
                 {
                     "name": "mouseleave",
@@ -64001,7 +64064,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 94
+                    "line": 98
                 }
             ],
             "standalone": false,
@@ -64009,7 +64072,7 @@
             "description": "<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { TooltipModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-tooltip--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { TooltipModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-tooltip--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tAfterContentChecked,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tHostBinding,\n\tHostListener,\n\tInput,\n\tNgZone,\n\tRenderer2,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { PopoverContainer } from \"carbon-components-angular/popover\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TooltipModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tooltip--basic)\n */\n@Component({\n\tselector: \"cds-tooltip, ibm-tooltip\",\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t<span #contentWrapper>\n\t\t\t<ng-content></ng-content>\n\t\t</span>\n\t\t<span\n\t\t\t*ngIf=\"description\"\n\t\t\tclass=\"cds--popover\"\n\t\t\t[id]=\"id\"\n\t\t\t[attr.aria-hidden]=\"!isOpen\"\n\t\t\trole=\"tooltip\">\n\t\t\t<ng-container *ngIf=\"!disabled\">\n\t\t\t\t<span class=\"cds--popover-content cds--tooltip-content\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(description)\">{{description}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(description)\" [ngTemplateOutlet]=\"description\"></ng-template>\n\t\t\t\t\t<span *ngIf=\"autoAlign\" class=\"cds--popover-caret cds--popover--auto-align\"></span>\n\t\t\t\t</span>\n\t\t\t\t<span *ngIf=\"!autoAlign\" class=\"cds--popover-caret\"></span>\n\t\t\t</ng-container>\n\t\t</span>\n\t`\n})\nexport class Tooltip extends PopoverContainer implements AfterContentChecked {\n\tstatic tooltipCount = 0;\n\n\t@HostBinding(\"class.cds--tooltip\") tooltipClass = true;\n\n\t@Input() id = `tooltip-${Tooltip.tooltipCount++}`;\n\t/**\n\t * Set delay before tooltip is shown\n\t */\n\t@Input() enterDelayMs = 100;\n\t/**\n\t * Set delay when tooltip disappears\n\t */\n\t@Input() leaveDelayMs = 300;\n\t/**\n\t * Prevent tooltip from showing, used by icon button\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * The string or template content to be exposed by the tooltip.\n\t */\n\t@Input() description: string | TemplateRef<any>;\n\n\t@ViewChild(\"contentWrapper\") wrapper: ElementRef<HTMLSpanElement>;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) {\n\t\tsuper(elementRef, ngZone, renderer, changeDetectorRef);\n\t\tthis.highContrast = true;\n\t\tthis.dropShadow = false;\n\t}\n\n\t@HostListener(\"mouseenter\", [\"$event\"])\n\tmouseenter(event) {\n\t\tsetTimeout(() => {\n\t\t\tthis.handleChange(true, event);\n\t\t}, this.enterDelayMs);\n\t}\n\n\t@HostListener(\"mouseleave\", [\"$event\"])\n\tmouseleave(event) {\n\t\tsetTimeout(() => {\n\t\t\tthis.handleChange(false, event);\n\t\t}, this.leaveDelayMs);\n\t}\n\n\t@HostListener(\"keyup\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tif (open && event.key === \"Escape\") {\n\t\t\tevent.stopPropagation();\n\t\t\tthis.handleChange(false, event);\n\t\t}\n\t}\n\n\t// We are not focusing on entire popover, only the trigger\n\t@HostListener(\"focusin\", [\"$event\"])\n\thandleFocus(event: Event) {\n\t\tthis.handleChange(true, event);\n\t}\n\n\t@HostListener(\"focusout\", [\"$event\"])\n\thandleFocusOut(event: Event) {\n\t\tthis.handleChange(false, event);\n\t}\n\n\tisTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Check for any changes in the projected content & apply accessibility attribute if needed\n\t */\n\tngAfterContentChecked() {\n\t\tif (this.wrapper) {\n\t\t\tconst buttonElement = this.wrapper.nativeElement.querySelector(\"button\");\n\t\t\tif (buttonElement && !buttonElement.getAttribute(\"aria-labelledby\")) {\n\t\t\t\tbuttonElement.setAttribute(\"aria-labelledby\", this.id);\n\t\t\t}\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterContentChecked,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tHostBinding,\n\tHostListener,\n\tInput,\n\tNgZone,\n\tRenderer2,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { PopoverContainer } from \"carbon-components-angular/popover\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TooltipModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tooltip--basic)\n */\n@Component({\n\tselector: \"cds-tooltip, ibm-tooltip\",\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t<span #contentWrapper>\n\t\t\t<ng-content></ng-content>\n\t\t</span>\n\t\t<span\n\t\t\t*ngIf=\"description\"\n\t\t\tclass=\"cds--popover\"\n\t\t\t[id]=\"id\"\n\t\t\t[attr.aria-hidden]=\"!isOpen\"\n\t\t\trole=\"tooltip\">\n\t\t\t<ng-container *ngIf=\"!disabled\">\n\t\t\t\t<span class=\"cds--popover-content cds--tooltip-content\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(description)\">{{description}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(description)\" [ngTemplateOutlet]=\"description\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"></ng-template>\n\t\t\t\t\t<span *ngIf=\"autoAlign\" class=\"cds--popover-caret cds--popover--auto-align\"></span>\n\t\t\t\t</span>\n\t\t\t\t<span *ngIf=\"!autoAlign\" class=\"cds--popover-caret\"></span>\n\t\t\t</ng-container>\n\t\t</span>\n\t`\n})\nexport class Tooltip extends PopoverContainer implements AfterContentChecked {\n\tstatic tooltipCount = 0;\n\n\t@HostBinding(\"class.cds--tooltip\") tooltipClass = true;\n\n\t@Input() id = `tooltip-${Tooltip.tooltipCount++}`;\n\t/**\n\t * Set delay before tooltip is shown\n\t */\n\t@Input() enterDelayMs = 100;\n\t/**\n\t * Set delay when tooltip disappears\n\t */\n\t@Input() leaveDelayMs = 300;\n\t/**\n\t * Prevent tooltip from showing, used by icon button\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * The string or template content to be exposed by the tooltip.\n\t */\n\t@Input() description: string | TemplateRef<any>;\n\t/**\n\t * Optional data for templates passed as implicit context\n\t */\n\t@Input() templateContext: any\n\n\t@ViewChild(\"contentWrapper\") wrapper: ElementRef<HTMLSpanElement>;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) {\n\t\tsuper(elementRef, ngZone, renderer, changeDetectorRef);\n\t\tthis.highContrast = true;\n\t\tthis.dropShadow = false;\n\t}\n\n\t@HostListener(\"mouseenter\", [\"$event\"])\n\tmouseenter(event) {\n\t\tsetTimeout(() => {\n\t\t\tthis.handleChange(true, event);\n\t\t}, this.enterDelayMs);\n\t}\n\n\t@HostListener(\"mouseleave\", [\"$event\"])\n\tmouseleave(event) {\n\t\tsetTimeout(() => {\n\t\t\tthis.handleChange(false, event);\n\t\t}, this.leaveDelayMs);\n\t}\n\n\t@HostListener(\"keyup\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tif (open && event.key === \"Escape\") {\n\t\t\tevent.stopPropagation();\n\t\t\tthis.handleChange(false, event);\n\t\t}\n\t}\n\n\t// We are not focusing on entire popover, only the trigger\n\t@HostListener(\"focusin\", [\"$event\"])\n\thandleFocus(event: Event) {\n\t\tthis.handleChange(true, event);\n\t}\n\n\t@HostListener(\"focusout\", [\"$event\"])\n\thandleFocusOut(event: Event) {\n\t\tthis.handleChange(false, event);\n\t}\n\n\tisTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Check for any changes in the projected content & apply accessibility attribute if needed\n\t */\n\tngAfterContentChecked() {\n\t\tif (this.wrapper) {\n\t\t\tconst buttonElement = this.wrapper.nativeElement.querySelector(\"button\");\n\t\t\tif (buttonElement && !buttonElement.getAttribute(\"aria-labelledby\")) {\n\t\t\t\tbuttonElement.setAttribute(\"aria-labelledby\", this.id);\n\t\t\t}\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -64044,7 +64107,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 73,
+                "line": 77,
                 "jsdoctags": [
                     {
                         "name": "elementRef",
@@ -64091,7 +64154,7 @@
         },
         {
             "name": "TooltipDefinition",
-            "id": "component-TooltipDefinition-e84783f408396ee38f0daff25f4a69407aef2bab6644a56db4c95be605c982e6d0299c3101f9fcfc75977f7e0dfa2ad26d06036b6bd5e4f9e529084080ca1e65",
+            "id": "component-TooltipDefinition-497ddf91eb2cc40f47373ab8f5b2a360a01346eed31f64a9e6f25d4b96c646a0318b773a06ca987b7f96f518e9c37fbf380f9edfcce919c0a5ee220b32836c08",
             "file": "src/tooltip/definition-tooptip.component.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -64102,7 +64165,7 @@
             "selector": "cds-tooltip-definition, ibm-tooltip-definition",
             "styleUrls": [],
             "styles": [],
-            "template": "<button\n\tclass=\"cds--definition-term\"\n\t[attr.aria-controls]=\"id\"\n\t[attr.aria-expanded]=\"isOpen\"\n\t(blur)=\"onBlur($event)\"\n\t(click)=\"onClick($event)\"\n\ttype=\"button\">\n\t<ng-content></ng-content>\n</button>\n<span\n\t*ngIf=\"description\"\n\tclass=\"cds--popover\"\n\t[id]=\"id\"\n\t[attr.aria-hidden]=\"isOpen\"\n\trole=\"tooltip\">\n\t<span class=\"cds--popover-content cds--definition-tooltip\">\n\t\t<ng-container *ngIf=\"!isTemplate(description)\">{{description}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(description)\" [ngTemplateOutlet]=\"description\"></ng-template>\n\t\t<span *ngIf=\"autoAlign\" class=\"cds--popover-caret cds--popover--auto-align\"></span>\n\t</span>\n\t<span *ngIf=\"!autoAlign\" class=\"cds--popover-caret\"></span>\n</span>\n\t",
+            "template": "<button\n\tclass=\"cds--definition-term\"\n\t[attr.aria-controls]=\"id\"\n\t[attr.aria-expanded]=\"isOpen\"\n\t(blur)=\"onBlur($event)\"\n\t(click)=\"onClick($event)\"\n\ttype=\"button\">\n\t<ng-content></ng-content>\n</button>\n<span\n\t*ngIf=\"description\"\n\tclass=\"cds--popover\"\n\t[id]=\"id\"\n\t[attr.aria-hidden]=\"isOpen\"\n\trole=\"tooltip\">\n\t<span class=\"cds--popover-content cds--definition-tooltip\">\n\t\t<ng-container *ngIf=\"!isTemplate(description)\">{{description}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(description)\" [ngTemplateOutlet]=\"description\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"></ng-template>\n\t\t<span *ngIf=\"autoAlign\" class=\"cds--popover-caret cds--popover--auto-align\"></span>\n\t</span>\n\t<span *ngIf=\"!autoAlign\" class=\"cds--popover-caret\"></span>\n</span>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -64126,6 +64189,16 @@
                     "type": "string",
                     "decorators": []
                 },
+                {
+                    "name": "templateContext",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nOptional data for templates passed as implicit context\n",
+                    "description": "<p>Optional data for templates passed as implicit context</p>\n",
+                    "line": 63,
+                    "type": "any",
+                    "decorators": []
+                },
                 {
                     "name": "align",
                     "deprecated": false,
@@ -64329,7 +64402,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 81,
+                    "line": 85,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -64366,7 +64439,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 93,
+                    "line": 97,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -64397,7 +64470,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 89,
+                    "line": 93,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -64434,7 +64507,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 72,
+                    "line": 76,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -64462,7 +64535,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 76,
+                    "line": 80,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -64729,7 +64802,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 81
+                    "line": 85
                 },
                 {
                     "name": "mouseleave",
@@ -64746,7 +64819,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 89
+                    "line": 93
                 }
             ],
             "standalone": false,
@@ -64754,7 +64827,7 @@
             "description": "<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { TooltipModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-tooltip-definition--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { TooltipModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-tooltip-definition--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tHostListener,\n\tInput,\n\tNgZone,\n\tRenderer2,\n\tTemplateRef\n} from \"@angular/core\";\nimport { PopoverContainer } from \"carbon-components-angular/popover\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TooltipModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tooltip-definition--basic)\n */\n@Component({\n\tselector: \"cds-tooltip-definition, ibm-tooltip-definition\",\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t<button\n\t\t\tclass=\"cds--definition-term\"\n\t\t\t[attr.aria-controls]=\"id\"\n\t\t\t[attr.aria-expanded]=\"isOpen\"\n\t\t\t(blur)=\"onBlur($event)\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\ttype=\"button\">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t\t<span\n\t\t\t*ngIf=\"description\"\n\t\t\tclass=\"cds--popover\"\n\t\t\t[id]=\"id\"\n\t\t\t[attr.aria-hidden]=\"isOpen\"\n\t\t\trole=\"tooltip\">\n\t\t\t<span class=\"cds--popover-content cds--definition-tooltip\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(description)\">{{description}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(description)\" [ngTemplateOutlet]=\"description\"></ng-template>\n\t\t\t\t<span *ngIf=\"autoAlign\" class=\"cds--popover-caret cds--popover--auto-align\"></span>\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!autoAlign\" class=\"cds--popover-caret\"></span>\n\t\t</span>\n\t`\n})\nexport class TooltipDefinition extends PopoverContainer {\n\tstatic tooltipCount = 0;\n\n\t@Input() id = `tooltip-definition-${TooltipDefinition.tooltipCount++}`;\n\n\t/**\n\t * The string or template content to be exposed by the tooltip.\n\t */\n\t@Input() description: string | TemplateRef<any>;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) {\n\t\tsuper(elementRef, ngZone, renderer, changeDetectorRef);\n\t\tthis.highContrast = true;\n\t\tthis.dropShadow = false;\n\t}\n\n\tonBlur(event: Event) {\n\t\tthis.handleChange(false, event);\n\t}\n\n\tonClick(event: Event) {\n\t\tthis.handleChange(!this.isOpen, event);\n\t}\n\n\t@HostListener(\"keyup\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tif (this.isOpen && event.key === \"Escape\") {\n\t\t\tevent.stopPropagation();\n\t\t\tthis.handleChange(false, event);\n\t\t}\n\t}\n\n\t@HostListener(\"mouseleave\", [\"$event\"])\n\tmouseleave(event) {\n\t\tthis.handleChange(false, event);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import {\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tHostListener,\n\tInput,\n\tNgZone,\n\tRenderer2,\n\tTemplateRef\n} from \"@angular/core\";\nimport { PopoverContainer } from \"carbon-components-angular/popover\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TooltipModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tooltip-definition--basic)\n */\n@Component({\n\tselector: \"cds-tooltip-definition, ibm-tooltip-definition\",\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t<button\n\t\t\tclass=\"cds--definition-term\"\n\t\t\t[attr.aria-controls]=\"id\"\n\t\t\t[attr.aria-expanded]=\"isOpen\"\n\t\t\t(blur)=\"onBlur($event)\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\ttype=\"button\">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t\t<span\n\t\t\t*ngIf=\"description\"\n\t\t\tclass=\"cds--popover\"\n\t\t\t[id]=\"id\"\n\t\t\t[attr.aria-hidden]=\"isOpen\"\n\t\t\trole=\"tooltip\">\n\t\t\t<span class=\"cds--popover-content cds--definition-tooltip\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(description)\">{{description}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(description)\" [ngTemplateOutlet]=\"description\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"></ng-template>\n\t\t\t\t<span *ngIf=\"autoAlign\" class=\"cds--popover-caret cds--popover--auto-align\"></span>\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!autoAlign\" class=\"cds--popover-caret\"></span>\n\t\t</span>\n\t`\n})\nexport class TooltipDefinition extends PopoverContainer {\n\tstatic tooltipCount = 0;\n\n\t@Input() id = `tooltip-definition-${TooltipDefinition.tooltipCount++}`;\n\n\t/**\n\t * The string or template content to be exposed by the tooltip.\n\t */\n\t@Input() description: string | TemplateRef<any>;\n\t/**\n\t * Optional data for templates passed as implicit context\n\t */\n\t@Input() templateContext: any;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) {\n\t\tsuper(elementRef, ngZone, renderer, changeDetectorRef);\n\t\tthis.highContrast = true;\n\t\tthis.dropShadow = false;\n\t}\n\n\tonBlur(event: Event) {\n\t\tthis.handleChange(false, event);\n\t}\n\n\tonClick(event: Event) {\n\t\tthis.handleChange(!this.isOpen, event);\n\t}\n\n\t@HostListener(\"keyup\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tif (this.isOpen && event.key === \"Escape\") {\n\t\t\tevent.stopPropagation();\n\t\t\tthis.handleChange(false, event);\n\t\t}\n\t}\n\n\t@HostListener(\"mouseleave\", [\"$event\"])\n\tmouseleave(event) {\n\t\tthis.handleChange(false, event);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -64789,7 +64862,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 59,
+                "line": 63,
                 "jsdoctags": [
                     {
                         "name": "elementRef",
@@ -69336,6 +69409,16 @@
                 "type": "object",
                 "defaultValue": "{\n\tprovide: AnimationFrameServiceSingleton,\n\tdeps: [[new Optional(), new SkipSelf(), AnimationFrameServiceSingleton], NgZone],\n\tuseFactory: ANIMATION_FRAME_SERVICE_SINGLETON_PROVIDER_FACTORY\n}"
             },
+            {
+                "name": "AutoAlignTemplate",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/button/icon-button.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the tooltip:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<cds-icon-button\n\t\t\t\t\tbuttonId=\"icon-btn1\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t[kind]=\"kind\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"autoAlign\"\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[buttonNgClass]=\"buttonNgClass\"\n\t\t\t\t\t[buttonAttributes]=\"buttonAttributes\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[description]=\"description\"\n\t\t\t\t\t(click)=\"onClick($event)\"\n\t\t\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t\t\t(blur)=\"onBlur($event)\">\n\t\t\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"copy\" size=\"16\"></svg>\n\t\t\t\t</cds-icon-button>\n\t\t\t</div>\n\t\t</div>\n\t`\n})"
+            },
             {
                 "name": "AutoAlignTemplate",
                 "ctype": "miscellaneous",
@@ -72840,6 +72923,16 @@
                 "type": "",
                 "defaultValue": "() => ({\n\ttemplate: `\n\t\t<ng-template #action let-item>\n\t\t\t<button\n\t\t\t\tibmButton=\"ghost\"\n\t\t\t\taria-label=\"Action\"\n\t\t\t\ticonOnly=\"true\">\n\t\t\t\t<svg ibmIcon=\"subtract--alt\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t</ng-template>\n\t\t<cds-contained-list label=\"List title\">\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t\t<cds-contained-list-item [action]=\"action\">List item</cds-contained-list-item>\n\t\t</cds-contained-list>\n\t`\n})"
             },
+            {
+                "name": "WithAutoAlign",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/button/icon-button.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "AutoAlignTemplate.bind({})"
+            },
             {
                 "name": "WithAutoAlign",
                 "ctype": "miscellaneous",
@@ -75378,6 +75471,48 @@
                     "defaultValue": "{\n\tprovide: DocumentService,\n\tdeps: [[new Optional(), new SkipSelf(), DocumentService]],\n\tuseFactory: DOCUMENT_SERVICE_PROVIDER_FACTORY\n}"
                 }
             ],
+            "src/button/icon-button.stories.ts": [
+                {
+                    "name": "AutoAlignTemplate",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/button/icon-button.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the tooltip:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<cds-icon-button\n\t\t\t\t\tbuttonId=\"icon-btn1\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t[kind]=\"kind\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"autoAlign\"\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[buttonNgClass]=\"buttonNgClass\"\n\t\t\t\t\t[buttonAttributes]=\"buttonAttributes\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[description]=\"description\"\n\t\t\t\t\t(click)=\"onClick($event)\"\n\t\t\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t\t\t(blur)=\"onBlur($event)\">\n\t\t\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"copy\" size=\"16\"></svg>\n\t\t\t\t</cds-icon-button>\n\t\t\t</div>\n\t\t</div>\n\t`\n})"
+                },
+                {
+                    "name": "Basic",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/button/icon-button.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
+                {
+                    "name": "Template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/button/icon-button.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-icon-button\n\t\t\tbuttonId=\"icon-btn1\"\n\t\t\ttype=\"button\"\n\t\t\t[kind]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[align]=\"align\"\n\t\t\t[buttonNgClass]=\"buttonNgClass\"\n\t\t\t[buttonAttributes]=\"buttonAttributes\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\tdescription=\"Icon Description\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"copy\" size=\"16\"></svg>\n\t\t</cds-icon-button>\n\t`\n})"
+                },
+                {
+                    "name": "WithAutoAlign",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/button/icon-button.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "AutoAlignTemplate.bind({})"
+                }
+            ],
             "src/popover/popover.stories.ts": [
                 {
                     "name": "AutoAlignTemplate",
@@ -76015,28 +76150,6 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tWith icon\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n\t\t</button>\n\t`\n})"
                 }
             ],
-            "src/button/icon-button.stories.ts": [
-                {
-                    "name": "Basic",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/button/icon-button.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "Template.bind({})"
-                },
-                {
-                    "name": "Template",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/button/icon-button.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-icon-button\n\t\t\tbuttonId=\"icon-btn1\"\n\t\t\ttype=\"button\"\n\t\t\t[kind]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[align]=\"align\"\n\t\t\t[buttonNgClass]=\"buttonNgClass\"\n\t\t\t[buttonAttributes]=\"buttonAttributes\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\tdescription=\"Icon Description\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"copy\" size=\"16\"></svg>\n\t\t</cds-icon-button>\n\t`\n})"
-                }
-            ],
             "src/checkbox/checkbox.stories.ts": [
                 {
                     "name": "Basic",
@@ -81034,7 +81147,7 @@
                 "linktype": "component",
                 "name": "BaseIconButton",
                 "coveragePercent": 100,
-                "coverageCount": "8/8",
+                "coverageCount": "9/9",
                 "status": "very-good"
             },
             {
@@ -81121,9 +81234,19 @@
                 "linktype": "component",
                 "name": "IconButton",
                 "coveragePercent": 76,
-                "coverageCount": "19/25",
+                "coverageCount": "20/26",
                 "status": "very-good"
             },
+            {
+                "filePath": "src/button/icon-button.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "AutoAlignTemplate",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/button/icon-button.stories.ts",
                 "type": "variable",
@@ -81144,6 +81267,16 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/button/icon-button.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "WithAutoAlign",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/checkbox/checkbox-exported-tests.ts",
                 "type": "class",
@@ -81246,8 +81379,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "CodeSnippet",
-                "coveragePercent": 44,
-                "coverageCount": "20/45",
+                "coveragePercent": 45,
+                "coverageCount": "21/46",
                 "status": "medium"
             },
             {
@@ -86615,8 +86748,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "TooltipDefinition",
-                "coveragePercent": 45,
-                "coverageCount": "14/31",
+                "coveragePercent": 46,
+                "coverageCount": "15/32",
                 "status": "medium"
             },
             {
@@ -86664,8 +86797,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "Tooltip",
-                "coveragePercent": 41,
-                "coverageCount": "17/41",
+                "coveragePercent": 42,
+                "coverageCount": "18/42",
                 "status": "medium"
             },
             {
@@ -86876,8 +87009,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "HeaderAction",
-                "coveragePercent": 92,
-                "coverageCount": "13/14",
+                "coveragePercent": 93,
+                "coverageCount": "14/15",
                 "status": "very-good"
             },
             {