carbon-components-angular 5.53.1 → 5.54.1

package/docs/documentation.json

@@ -17511,6 +17511,58 @@
             "methodsClass": [],
             "extends": []
         },
+        {
+            "name": "TagIconDirective",
+            "id": "directive-TagIconDirective-9dd312d1ac95dd89098a9bb1fa9378101eda24c999093b11785a6a111cec157212c04a44d712b4fc6b10d0466f646d9b4efaf571d8fd665ce55e774fbfc637ad",
+            "file": "src/tag/tag-icon.directive.ts",
+            "type": "directive",
+            "description": "",
+            "rawdescription": "\n",
+            "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsTagIcon], [ibmTagIcon]\"\n})\nexport class TagIconDirective {\n\t@HostBinding(\"class.cds--tag__custom-icon\") tagIcon = true;\n}\n",
+            "selector": "[cdsTagIcon], [ibmTagIcon]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [
+                {
+                    "name": "class.cds--tag__custom-icon",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 7,
+                    "type": "boolean",
+                    "decorators": []
+                }
+            ],
+            "hostListeners": [],
+            "propertiesClass": [
+                {
+                    "name": "tagIcon",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 7,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'class.cds--tag__custom-icon'"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ]
+                }
+            ],
+            "methodsClass": [],
+            "extends": []
+        },
         {
             "name": "TextArea",
             "id": "directive-TextArea-8d330b7a2bb57091bffb8b71f610d9f3f98049b5d8dfb70f002d482b00d7509202e1ed207dc3f39eb43e3501ef0eddbe53558b9d3882d3c690ad73e626db938f",
@@ -61399,7 +61451,7 @@
         },
         {
             "name": "Tag",
-            "id": "component-Tag-55f1cd7859c977c4d14ecf483d3b9c59bca8fd99161ad6142e3f1023e093c13da427591c7d445837a0d4417ea866a94c686b0aa054051b98832fa609bf9b4f55",
+            "id": "component-Tag-c1aae23a3d592b407693ad02f2748e209315c9e57f5e91ae24409644c1f78ae8d82074448fa0892bc98e27280876ac99d33aa10b6af1e92a7bdf86f17ba39889",
             "file": "src/tag/tag.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -61409,7 +61461,7 @@
             "selector": "cds-tag, ibm-tag",
             "styleUrls": [],
             "styles": [],
-            "template": "<ng-content></ng-content>",
+            "template": "<ng-container *ngIf=\"!skeleton\">\n\t<ng-content select=\"[cdsTagIcon],[ibmTagIcon]\"></ng-content>\n\t<span class=\"cds--tag__label\">\n\t\t<ng-content></ng-content>\n\t</span>\n</ng-container>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -61419,7 +61471,7 @@
                     "defaultValue": "\"\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 47,
+                    "line": 54,
                     "type": "string",
                     "decorators": []
                 },
@@ -61430,8 +61482,17 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTag render size\n",
                     "description": "<p>Tag render size</p>\n",
-                    "line": 45,
-                    "type": "\"sm\" | \"md\"",
+                    "line": 52,
+                    "type": "\"sm\" | \"md\" | \"lg\"",
+                    "decorators": []
+                },
+                {
+                    "name": "skeleton",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 56,
+                    "type": "boolean",
                     "decorators": []
                 },
                 {
@@ -61441,7 +61502,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nType of the tag determines the styling\n",
                     "description": "<p>Type of the tag determines the styling</p>\n",
-                    "line": 40,
+                    "line": 47,
                     "type": "TagType",
                     "decorators": []
                 }
@@ -61456,7 +61517,27 @@
                     "name": "attr.class",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 49,
+                    "jsdoctags": [
+                        {
+                            "pos": 1047,
+                            "end": 1097,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "kind": 334,
+                            "tagName": {
+                                "pos": 1048,
+                                "end": 1052,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "todo"
+                            },
+                            "comment": "<p>Remove <code>cds--tag--${this.size}</code> in v7</p>\n"
+                        }
+                    ],
+                    "line": 62,
                     "type": "string",
                     "decorators": []
                 }
@@ -61467,7 +61548,7 @@
             "description": "<p>Component that represents a tag for labelling/categorizing using keywords. Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { TagModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-tag--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nComponent that represents a tag for labelling/categorizing using keywords. Get started with importing the module:\n\n```typescript\nimport { TagModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-tag--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\n/**\n * Supported tag types for carbon v10\n */\nexport type TagType = \"red\" |\n\t\"magenta\" |\n\t\"purple\" |\n\t\"blue\" |\n\t\"cyan\" |\n\t\"teal\" |\n\t\"green\" |\n\t\"gray\" |\n\t\"cool-gray\" |\n\t\"warm-gray\" |\n\t\"high-contrast\" |\n\t\"outline\";\n\n/**\n * Component that represents a tag for labelling/categorizing using keywords. Get started with importing the module:\n *\n * ```typescript\n * import { TagModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tag--basic)\n */\n@Component({\n\tselector: \"cds-tag, ibm-tag\",\n\ttemplate: `<ng-content></ng-content>`\n})\nexport class Tag {\n\t/**\n\t * Type of the tag determines the styling\n\t */\n\t@Input() type: TagType = \"gray\";\n\n\t/**\n\t * Tag render size\n\t */\n\t@Input() size: \"sm\" | \"md\" = \"md\";\n\n\t@Input() class = \"\";\n\n\t@HostBinding(\"attr.class\") get attrClass() {\n\t\treturn `cds--tag cds--tag--${this.type} cds--tag--${this.size} cds--layout--size-${this.size} ${this.class}`;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\n/**\n * Supported tag types for carbon v10\n */\nexport type TagType = \"red\" |\n\t\"magenta\" |\n\t\"purple\" |\n\t\"blue\" |\n\t\"cyan\" |\n\t\"teal\" |\n\t\"green\" |\n\t\"gray\" |\n\t\"cool-gray\" |\n\t\"warm-gray\" |\n\t\"high-contrast\" |\n\t\"outline\";\n\n/**\n * Component that represents a tag for labelling/categorizing using keywords. Get started with importing the module:\n *\n * ```typescript\n * import { TagModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tag--basic)\n */\n@Component({\n\tselector: \"cds-tag, ibm-tag\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton\">\n\t\t\t<ng-content select=\"[cdsTagIcon],[ibmTagIcon]\"></ng-content>\n\t\t\t<span class=\"cds--tag__label\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</ng-container>\n\t`\n})\nexport class Tag {\n\t/**\n\t * Type of the tag determines the styling\n\t */\n\t@Input() type: TagType = \"gray\";\n\n\t/**\n\t * Tag render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@Input() class = \"\";\n\n\t@Input() skeleton = false;\n\n\t/**\n\t * @todo\n\t * Remove `cds--tag--${this.size}` in v7\n\t */\n\t@HostBinding(\"attr.class\") get attrClass() {\n\t\tconst skeletonClass = this.skeleton ? \"cds--skeleton\" : \"\";\n\t\tconst sizeClass = `cds--tag--${this.size} cds--layout--size-${this.size}`;\n\n\t\treturn `cds--tag cds--tag--${this.type} ${sizeClass} ${skeletonClass} ${this.class}`;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -61479,14 +61560,36 @@
                         "name": "attrClass",
                         "type": "",
                         "returnType": "",
-                        "line": 49
+                        "line": 62,
+                        "rawdescription": "\n\nRemove `cds--tag--${this.size}` in v7\n",
+                        "description": "<p>Remove <code>cds--tag--${this.size}</code> in v7</p>\n",
+                        "jsdoctags": [
+                            {
+                                "pos": 1047,
+                                "end": 1097,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 334,
+                                "tagName": {
+                                    "pos": 1048,
+                                    "end": 1052,
+                                    "flags": 16842752,
+                                    "modifierFlagsCache": 0,
+                                    "transformFlags": 0,
+                                    "kind": 80,
+                                    "escapedText": "todo"
+                                },
+                                "comment": "<p>Remove <code>cds--tag--${this.size}</code> in v7</p>\n"
+                            }
+                        ]
                     }
                 }
             }
         },
         {
             "name": "TagFilter",
-            "id": "component-TagFilter-2fd52f7c7ac83ecea74676e707ea5de54c612ca1cb3cc457f01445d92a2fab1d347a8e9557eee18bca47267ae7a0aaf0c9f8f7ce4077090620b18d017c60fd57",
+            "id": "component-TagFilter-798d22f3f19d7e6083cd447721b3260a2750650b5df1b41675b4179ac1e10fac49b974783e536111cdec5225f3597bf6de1ffe863b52a3fae3f51748f34528c3",
             "file": "src/tag/tag-filter.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -61496,7 +61599,7 @@
             "selector": "cds-tag-filter, ibm-tag-filter",
             "styleUrls": [],
             "styles": [],
-            "template": "<span\n\tclass=\"cds--tag__label\"\n\t[attr.title]=\"title ? title : null\"\n\t(click)=\"onClick($event)\">\n\t<ng-content></ng-content>\n</span>\n<button\n\tclass=\"cds--tag__close-icon\"\n\t(click)=\"onClose($event)\"\n\t[disabled]=\"disabled\"\n\t[title]=\"closeButtonLabel\">\n\t<span class=\"cds--visually-hidden\">{{closeButtonLabel}}</span>\n\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n</button>\n\t",
+            "template": "<ng-container *ngIf=\"!skeleton\">\n\t<ng-content select=\"[cdsTagIcon],[ibmTagIcon]\"></ng-content>\n\t<span\n\t\tclass=\"cds--tag__label\"\n\t\t[attr.title]=\"title ? title : null\"\n\t\t(click)=\"onClick($event)\">\n\t\t<ng-content></ng-content>\n\t</span>\n\t<button\n\t\tclass=\"cds--tag__close-icon\"\n\t\t(click)=\"onClose($event)\"\n\t\t[disabled]=\"disabled\"\n\t\t[title]=\"closeButtonLabel\">\n\t\t<span class=\"cds--visually-hidden\">{{closeButtonLabel}}</span>\n\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t</button>\n</ng-container>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -61506,15 +61609,16 @@
                     "defaultValue": "\"Clear Filter\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 30,
+                    "line": 34,
                     "type": "string",
                     "decorators": []
                 },
                 {
                     "name": "disabled",
+                    "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 31,
+                    "line": 35,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61522,7 +61626,7 @@
                     "name": "title",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 32,
+                    "line": 36,
                     "type": "string",
                     "decorators": []
                 },
@@ -61531,7 +61635,7 @@
                     "defaultValue": "\"\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 47,
+                    "line": 54,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -61545,8 +61649,20 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTag render size\n",
                     "description": "<p>Tag render size</p>\n",
-                    "line": 45,
-                    "type": "\"sm\" | \"md\"",
+                    "line": 52,
+                    "type": "\"sm\" | \"md\" | \"lg\"",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "Tag"
+                    }
+                },
+                {
+                    "name": "skeleton",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 56,
+                    "type": "boolean",
                     "decorators": [],
                     "inheritance": {
                         "file": "Tag"
@@ -61559,7 +61675,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nType of the tag determines the styling\n",
                     "description": "<p>Type of the tag determines the styling</p>\n",
-                    "line": 40,
+                    "line": 47,
                     "type": "TagType",
                     "decorators": [],
                     "inheritance": {
@@ -61575,7 +61691,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWe need to stop the immedate propagation of click on the close button\nto prevent undesired effects when used within dialogs.\n\nWe need to emit a click event on close to allow for clicks to be listened\nto on the immediate close button element. `action` distinguishes between clicks on\nthe tag vs. clicks on the close button.\n",
                     "description": "<p>We need to stop the immedate propagation of click on the close button\nto prevent undesired effects when used within dialogs.</p>\n<p>We need to emit a click event on close to allow for clicks to be listened\nto on the immediate close button element. <code>action</code> distinguishes between clicks on\nthe tag vs. clicks on the close button.</p>\n",
-                    "line": 47,
+                    "line": 51,
                     "type": "EventEmitter"
                 },
                 {
@@ -61585,7 +61701,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nFunction for close/delete the tag\n",
                     "description": "<p>Function for close/delete the tag</p>\n",
-                    "line": 37,
+                    "line": 41,
                     "type": "EventEmitter"
                 }
             ],
@@ -61604,7 +61720,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 49,
+                    "line": 53,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -61632,7 +61748,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 56,
+                    "line": 60,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -61655,7 +61771,7 @@
                     "name": "attr.aria-label",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 66,
+                    "line": 78,
                     "type": "any",
                     "decorators": []
                 },
@@ -61663,7 +61779,27 @@
                     "name": "attr.class",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 62,
+                    "jsdoctags": [
+                        {
+                            "pos": 1662,
+                            "end": 1712,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "kind": 334,
+                            "tagName": {
+                                "pos": 1663,
+                                "end": 1667,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "todo"
+                            },
+                            "comment": "<p>Remove <code>cds--tag--${this.size}</code> in v7</p>\n"
+                        }
+                    ],
+                    "line": 70,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -61677,7 +61813,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tOutput,\n\tEventEmitter,\n\tHostBinding,\n\tInput\n} from \"@angular/core\";\nimport { Tag } from \"./tag.component\";\n\n@Component({\n\tselector: \"cds-tag-filter, ibm-tag-filter\",\n\ttemplate: `\n\t\t<span\n\t\t\tclass=\"cds--tag__label\"\n\t\t\t[attr.title]=\"title ? title : null\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<ng-content></ng-content>\n\t\t</span>\n\t\t<button\n\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t(click)=\"onClose($event)\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[title]=\"closeButtonLabel\">\n\t\t\t<span class=\"cds--visually-hidden\">{{closeButtonLabel}}</span>\n\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t</button>\n\t`\n})\nexport class TagFilter extends Tag {\n\t@Input() closeButtonLabel = \"Clear Filter\";\n\t@Input() disabled: boolean;\n\t@Input() title: string;\n\n\t/**\n\t * Function for close/delete the tag\n\t */\n\t@Output() close = new EventEmitter<any>();\n\n\t/**\n\t * We need to stop the immedate propagation of click on the close button\n\t * to prevent undesired effects when used within dialogs.\n\t *\n\t * We need to emit a click event on close to allow for clicks to be listened\n\t * to on the immediate close button element. `action` distinguishes between clicks on\n\t * the tag vs. clicks on the close button.\n\t */\n\t@Output() click = new EventEmitter<{ action: \"click\" | \"close\" }>();\n\n\tonClick(event: any) {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.click.emit({ action: \"click\" });\n\t\t}\n\t}\n\n\tonClose(event: any) {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.click.emit({ action: \"close\" });\n\t\tthis.close.emit();\n\t}\n\n\t@HostBinding(\"attr.class\") get attrClass() {\n\t\treturn `cds--tag cds--tag--filter cds--tag--${this.type} cds--tag--${this.size} cds--layout--size-${this.size} ${this.class}${this.disabled ? \" cds--tag--disabled\" : \"\"}`;\n\t}\n\n\t@HostBinding(\"attr.aria-label\") get attrAriaLabel() {\n\t\treturn `${this.title || \"\"} ${this.closeButtonLabel}`.trim();\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tOutput,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tTemplateRef\n} from \"@angular/core\";\nimport { Tag } from \"./tag.component\";\n\n@Component({\n\tselector: \"cds-tag-filter, ibm-tag-filter\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton\">\n\t\t\t<ng-content select=\"[cdsTagIcon],[ibmTagIcon]\"></ng-content>\n\t\t\t<span\n\t\t\t\tclass=\"cds--tag__label\"\n\t\t\t\t[attr.title]=\"title ? title : null\"\n\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t\t<button\n\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t(click)=\"onClose($event)\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[title]=\"closeButtonLabel\">\n\t\t\t\t<span class=\"cds--visually-hidden\">{{closeButtonLabel}}</span>\n\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t</ng-container>\n\t`\n})\nexport class TagFilter extends Tag {\n\t@Input() closeButtonLabel = \"Clear Filter\";\n\t@Input() disabled = false;\n\t@Input() title: string;\n\n\t/**\n\t * Function for close/delete the tag\n\t */\n\t@Output() close = new EventEmitter<any>();\n\n\t/**\n\t * We need to stop the immedate propagation of click on the close button\n\t * to prevent undesired effects when used within dialogs.\n\t *\n\t * We need to emit a click event on close to allow for clicks to be listened\n\t * to on the immediate close button element. `action` distinguishes between clicks on\n\t * the tag vs. clicks on the close button.\n\t */\n\t@Output() click = new EventEmitter<{ action: \"click\" | \"close\" }>();\n\n\tonClick(event: any) {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.click.emit({ action: \"click\" });\n\t\t}\n\t}\n\n\tonClose(event: any) {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.click.emit({ action: \"close\" });\n\t\tthis.close.emit();\n\t}\n\n\t/**\n\t * @todo\n\t * Remove `cds--tag--${this.size}` in v7\n\t */\n\t@HostBinding(\"attr.class\") get attrClass() {\n\t\tconst disabledClass = this.disabled ? \"cds--tag--disabled\" : \"\";\n\t\tconst sizeClass = `cds--tag--${this.size} cds--layout--size-${this.size}`;\n\t\tconst skeletonClass = this.skeleton ? \"cds--skeleton\" : \"\";\n\n\t\treturn `cds--tag cds--tag--filter cds--tag--${this.type} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`;\n\t}\n\n\t@HostBinding(\"attr.aria-label\") get attrAriaLabel() {\n\t\treturn `${this.title || \"\"} ${this.closeButtonLabel}`.trim();\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -61691,7 +61827,29 @@
                         "name": "attrClass",
                         "type": "",
                         "returnType": "",
-                        "line": 62
+                        "line": 70,
+                        "rawdescription": "\n\nRemove `cds--tag--${this.size}` in v7\n",
+                        "description": "<p>Remove <code>cds--tag--${this.size}</code> in v7</p>\n",
+                        "jsdoctags": [
+                            {
+                                "pos": 1662,
+                                "end": 1712,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 334,
+                                "tagName": {
+                                    "pos": 1663,
+                                    "end": 1667,
+                                    "flags": 16842752,
+                                    "modifierFlagsCache": 0,
+                                    "transformFlags": 0,
+                                    "kind": 80,
+                                    "escapedText": "todo"
+                                },
+                                "comment": "<p>Remove <code>cds--tag--${this.size}</code> in v7</p>\n"
+                            }
+                        ]
                     }
                 },
                 "attrAriaLabel": {
@@ -61700,7 +61858,541 @@
                         "name": "attrAriaLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 66
+                        "line": 78
+                    }
+                }
+            }
+        },
+        {
+            "name": "TagOperationalComponent",
+            "id": "component-TagOperationalComponent-d2b919d83748916a545489466c570a5e13fe7e38e2667165259a99f41a09dc8c5f197d5bdd64e3842c6b5db96ba75dc2f78aec0fac73848d621496af5a51fe02",
+            "file": "src/tag/tag-operational.component.ts",
+            "changeDetection": "ChangeDetectionStrategy.OnPush",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "cds-tag-operational, ibm-tag-operational",
+            "styleUrls": [],
+            "styles": [],
+            "template": "<ng-container *ngIf=\"!skeleton\">\n\t<ng-content select=\"[cdsTagIcon],[ibmTagIcon]\"></ng-content>\n\t<span class=\"cds--tag__label\">\n\t\t<ng-content></ng-content>\n\t</span>\n</ng-container>\n\t",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [
+                {
+                    "name": "disabled",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 26,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class",
+                    "defaultValue": "\"\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 54,
+                    "type": "string",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "Tag"
+                    }
+                },
+                {
+                    "name": "size",
+                    "defaultValue": "\"md\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nTag render size\n",
+                    "description": "<p>Tag render size</p>\n",
+                    "line": 52,
+                    "type": "\"sm\" | \"md\" | \"lg\"",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "Tag"
+                    }
+                },
+                {
+                    "name": "skeleton",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 56,
+                    "type": "boolean",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "Tag"
+                    }
+                },
+                {
+                    "name": "type",
+                    "defaultValue": "\"gray\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nType of the tag determines the styling\n",
+                    "description": "<p>Type of the tag determines the styling</p>\n",
+                    "line": 47,
+                    "type": "TagType",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "Tag"
+                    }
+                }
+            ],
+            "outputsClass": [],
+            "propertiesClass": [
+                {
+                    "name": "buttonType",
+                    "defaultValue": "\"button\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "optional": false,
+                    "description": "",
+                    "line": 23,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'attr.type'"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ]
+                },
+                {
+                    "name": "role",
+                    "defaultValue": "\"button\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "optional": false,
+                    "description": "",
+                    "line": 22,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'attr.role'"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ]
+                },
+                {
+                    "name": "tabIndex",
+                    "defaultValue": "0",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "number",
+                    "optional": false,
+                    "description": "",
+                    "line": 24,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'attr.tabindex'"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ]
+                }
+            ],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [
+                {
+                    "name": "attr.class",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "jsdoctags": [
+                        {
+                            "pos": 690,
+                            "end": 740,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "kind": 334,
+                            "tagName": {
+                                "pos": 691,
+                                "end": 695,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "todo"
+                            },
+                            "comment": "<p>Remove <code>cds--tag--${this.size}</code> in v7</p>\n"
+                        }
+                    ],
+                    "line": 32,
+                    "type": "string",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "Tag"
+                    }
+                },
+                {
+                    "name": "attr.role",
+                    "defaultValue": "\"button\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 22,
+                    "type": "string",
+                    "decorators": []
+                },
+                {
+                    "name": "attr.tabindex",
+                    "defaultValue": "0",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 24,
+                    "type": "number",
+                    "decorators": []
+                },
+                {
+                    "name": "attr.type",
+                    "defaultValue": "\"button\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 23,
+                    "type": "string",
+                    "decorators": []
+                }
+            ],
+            "hostListeners": [],
+            "standalone": false,
+            "imports": [],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tHostBinding,\n\tInput\n} from \"@angular/core\";\nimport { Tag } from \"./tag.component\";\n\n@Component({\n\tselector: \"cds-tag-operational, ibm-tag-operational\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton\">\n\t\t\t<ng-content select=\"[cdsTagIcon],[ibmTagIcon]\"></ng-content>\n\t\t\t<span class=\"cds--tag__label\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</ng-container>\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class TagOperationalComponent extends Tag {\n\t@HostBinding(\"attr.role\") role = \"button\";\n\t@HostBinding(\"attr.type\") buttonType = \"button\";\n\t@HostBinding(\"attr.tabindex\") tabIndex = 0;\n\n\t@Input() disabled = false;\n\n\t/**\n\t * @todo\n\t * Remove `cds--tag--${this.size}` in v7\n\t */\n\t@HostBinding(\"attr.class\") get attrClass() {\n\t\tconst disabledClass = this.disabled ? \"cds--tag--disabled\" : \"\";\n\t\tconst sizeClass = `cds--tag--${this.size} cds--layout--size-${this.size}`;\n\t\tconst skeletonClass = this.skeleton ? \"cds--skeleton\" : \"\";\n\n\t\treturn `cds--tag cds--tag--operational cds--tag--${this.type} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`;\n\t}\n}\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "",
+            "extends": [
+                "Tag"
+            ],
+            "accessors": {
+                "attrClass": {
+                    "name": "attrClass",
+                    "getSignature": {
+                        "name": "attrClass",
+                        "type": "",
+                        "returnType": "",
+                        "line": 32,
+                        "rawdescription": "\n\nRemove `cds--tag--${this.size}` in v7\n",
+                        "description": "<p>Remove <code>cds--tag--${this.size}</code> in v7</p>\n",
+                        "jsdoctags": [
+                            {
+                                "pos": 690,
+                                "end": 740,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 334,
+                                "tagName": {
+                                    "pos": 691,
+                                    "end": 695,
+                                    "flags": 16842752,
+                                    "modifierFlagsCache": 0,
+                                    "transformFlags": 0,
+                                    "kind": 80,
+                                    "escapedText": "todo"
+                                },
+                                "comment": "<p>Remove <code>cds--tag--${this.size}</code> in v7</p>\n"
+                            }
+                        ]
+                    }
+                }
+            }
+        },
+        {
+            "name": "TagSelectableComponent",
+            "id": "component-TagSelectableComponent-a65ac3aa63090d3652d72b074395f65256cdd474553539598bb9b655a9656f2fb566bb43b9bffdcf608acf7c5ab167a062977311511e9ecb06f404b8051acf7e",
+            "file": "src/tag/tag-selectable.component.ts",
+            "changeDetection": "ChangeDetectionStrategy.OnPush",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "cds-tag-selectable, ibm-tag-selectable",
+            "styleUrls": [],
+            "styles": [],
+            "template": "<ng-container *ngIf=\"!skeleton\">\n\t<ng-content select=\"[cdsTagIcon],[ibmTagIcon]\"></ng-content>\n\t<span class=\"cds--tag__label\">\n\t\t<ng-content></ng-content>\n\t</span>\n</ng-container>\n\t",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [
+                {
+                    "name": "class",
+                    "defaultValue": "\"\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 34,
+                    "type": "string",
+                    "decorators": []
+                },
+                {
+                    "name": "disabled",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 33,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "selected",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 35,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "size",
+                    "defaultValue": "\"md\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 31,
+                    "type": "\"sm\" | \"md\" | \"lg\"",
+                    "decorators": []
+                },
+                {
+                    "name": "skeleton",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 32,
+                    "type": "boolean",
+                    "decorators": []
+                }
+            ],
+            "outputsClass": [
+                {
+                    "name": "selectedChange",
+                    "defaultValue": "new EventEmitter<boolean>()",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 37,
+                    "type": "EventEmitter"
+                }
+            ],
+            "propertiesClass": [
+                {
+                    "name": "buttonType",
+                    "defaultValue": "\"button\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "optional": false,
+                    "description": "",
+                    "line": 25,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'attr.type'"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ]
+                },
+                {
+                    "name": "role",
+                    "defaultValue": "\"button\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "optional": false,
+                    "description": "",
+                    "line": 24,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'attr.role'"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ]
+                },
+                {
+                    "name": "tabIndex",
+                    "defaultValue": "0",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "number",
+                    "optional": false,
+                    "description": "",
+                    "line": 26,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'attr.tabindex'"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ]
+                }
+            ],
+            "methodsClass": [
+                {
+                    "name": "onClick",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 40,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "decorators": [
+                        {
+                            "name": "HostListener",
+                            "stringifiedArguments": "'click'"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ]
+                }
+            ],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [
+                {
+                    "name": "attr.aria-pressed",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 27,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "attr.class",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "jsdoctags": [
+                        {
+                            "pos": 1054,
+                            "end": 1104,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "kind": 334,
+                            "tagName": {
+                                "pos": 1055,
+                                "end": 1059,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "todo"
+                            },
+                            "comment": "<p>Remove <code>cds--tag--${this.size}</code> in v7</p>\n"
+                        }
+                    ],
+                    "line": 49,
+                    "type": "string",
+                    "decorators": []
+                },
+                {
+                    "name": "attr.role",
+                    "defaultValue": "\"button\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 24,
+                    "type": "string",
+                    "decorators": []
+                },
+                {
+                    "name": "attr.tabindex",
+                    "defaultValue": "0",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 26,
+                    "type": "number",
+                    "decorators": []
+                },
+                {
+                    "name": "attr.type",
+                    "defaultValue": "\"button\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 25,
+                    "type": "string",
+                    "decorators": []
+                }
+            ],
+            "hostListeners": [
+                {
+                    "name": "click",
+                    "args": [],
+                    "argsDecorator": [],
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 40
+                }
+            ],
+            "standalone": false,
+            "imports": [],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tHostListener,\n\tInput,\n\tOutput\n} from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-tag-selectable, ibm-tag-selectable\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton\">\n\t\t\t<ng-content select=\"[cdsTagIcon],[ibmTagIcon]\"></ng-content>\n\t\t\t<span class=\"cds--tag__label\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</ng-container>\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class TagSelectableComponent {\n\t@HostBinding(\"attr.role\") role = \"button\";\n\t@HostBinding(\"attr.type\") buttonType = \"button\";\n\t@HostBinding(\"attr.tabindex\") tabIndex = 0;\n\t@HostBinding(\"attr.aria-pressed\") get ariaPressed() {\n\t\treturn this.selected;\n\t}\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t@Input() skeleton = false;\n\t@Input() disabled = false;\n\t@Input() class = \"\";\n\t@Input() selected = false;\n\n\t@Output() selectedChange = new EventEmitter<boolean>();\n\n\t@HostListener(\"click\")\n\tonClick() {\n\t\tthis.selected = !this.selected;\n\t\tthis.selectedChange.emit(this.selected);\n\t}\n\n\t/**\n\t * @todo\n\t * Remove `cds--tag--${this.size}` in v7\n\t */\n\t@HostBinding(\"attr.class\") get attrClass() {\n\t\tconst disabledClass = this.disabled ? \"cds--tag--disabled\" : \"\";\n\t\tconst sizeClass = `cds--tag--${this.size} cds--layout--size-${this.size}`;\n\t\tconst skeletonClass = this.skeleton ? \"cds--skeleton\" : \"\";\n\t\tconst selectedClass = this.selected ? \"cds--tag--selectable-selected\" : \"\";\n\n\t\treturn `cds--tag cds--tag--selectable ${selectedClass} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`;\n\t}\n}\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "",
+            "extends": [],
+            "accessors": {
+                "ariaPressed": {
+                    "name": "ariaPressed",
+                    "getSignature": {
+                        "name": "ariaPressed",
+                        "type": "",
+                        "returnType": "",
+                        "line": 27
+                    }
+                },
+                "attrClass": {
+                    "name": "attrClass",
+                    "getSignature": {
+                        "name": "attrClass",
+                        "type": "",
+                        "returnType": "",
+                        "line": 49,
+                        "rawdescription": "\n\nRemove `cds--tag--${this.size}` in v7\n",
+                        "description": "<p>Remove <code>cds--tag--${this.size}</code> in v7</p>\n",
+                        "jsdoctags": [
+                            {
+                                "pos": 1054,
+                                "end": 1104,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 334,
+                                "tagName": {
+                                    "pos": 1055,
+                                    "end": 1059,
+                                    "flags": 16842752,
+                                    "modifierFlagsCache": 0,
+                                    "transformFlags": 0,
+                                    "kind": 80,
+                                    "escapedText": "todo"
+                                },
+                                "comment": "<p>Remove <code>cds--tag--${this.size}</code> in v7</p>\n"
+                            }
+                        ]
                     }
                 }
             }
@@ -62062,7 +62754,7 @@
         },
         {
             "name": "TextInputLabelComponent",
-            "id": "component-TextInputLabelComponent-f14584fce8ba15041c0135a0a64c5baa5afb8391618e7ef829969d866a2a97415598f29236a4b0a802d28233400d80b76e8a4865f168ffa1e26c3e267ce8b538",
+            "id": "component-TextInputLabelComponent-85c449c6e838da15776375a01fe857a981d585c39dad57825ec5a9c8adf2ccfc4959b452d9c0a1d8fb0d5e6954baa2865b2fd30545e13219070b8217db715e09",
             "file": "src/input/text-input-label.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -62083,7 +62775,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet the arialabel for label\n",
                     "description": "<p>Set the arialabel for label</p>\n",
-                    "line": 154,
+                    "line": 155,
                     "type": "string",
                     "decorators": []
                 },
@@ -62094,7 +62786,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a disabled label.\n",
                     "description": "<p>Set to <code>true</code> for a disabled label.</p>\n",
-                    "line": 119,
+                    "line": 120,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -62105,7 +62797,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExperimental: enable fluid state\n",
                     "description": "<p>Experimental: enable fluid state</p>\n",
-                    "line": 159,
+                    "line": 160,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -62115,7 +62807,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOptional helper text that appears under the label.\n",
                     "description": "<p>Optional helper text that appears under the label.</p>\n",
-                    "line": 134,
+                    "line": 135,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -62126,7 +62818,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for an invalid label component.\n",
                     "description": "<p>Set to <code>true</code> for an invalid label component.</p>\n",
-                    "line": 142,
+                    "line": 143,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -62136,7 +62828,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the invalid text.\n",
                     "description": "<p>Sets the invalid text.</p>\n",
-                    "line": 138,
+                    "line": 139,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -62147,7 +62839,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe id of the input item associated with the `Label`. This value is also used to associate the `Label` with\nits input counterpart through the 'for' attribute.\n",
                     "description": "<p>The id of the input item associated with the <code>Label</code>. This value is also used to associate the <code>Label</code> with\nits input counterpart through the &#39;for&#39; attribute.</p>\n",
-                    "line": 114,
+                    "line": 115,
                     "type": "string",
                     "decorators": []
                 },
@@ -62157,7 +62849,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHelper input property for ease of migration\nSince we cannot pass ng-content down easily from label component, we will accept the templates\n",
                     "description": "<p>Helper input property for ease of migration\nSince we cannot pass ng-content down easily from label component, we will accept the templates</p>\n",
-                    "line": 129,
+                    "line": 130,
                     "type": "TemplateRef<any>",
                     "decorators": []
                 },
@@ -62168,7 +62860,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a loading label.\n",
                     "description": "<p>Set to <code>true</code> for a loading label.</p>\n",
-                    "line": 123,
+                    "line": 124,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -62176,7 +62868,7 @@
                     "name": "textInputTemplate",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 130,
+                    "line": 131,
                     "type": "TemplateRef<any>",
                     "decorators": []
                 },
@@ -62187,7 +62879,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n",
                     "description": "<p>Set to <code>true</code> to show a warning (contents set by warningText)</p>\n",
-                    "line": 146,
+                    "line": 147,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -62197,7 +62889,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the warning text\n",
                     "description": "<p>Sets the warning text</p>\n",
-                    "line": 150,
+                    "line": 151,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 }
@@ -62212,7 +62904,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 164,
+                    "line": 165,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -62231,7 +62923,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Used to build the id of the input item associated with the <code>Label</code>.</p>\n",
-                    "line": 109,
+                    "line": 110,
                     "rawdescription": "\n\nUsed to build the id of the input item associated with the `Label`.\n",
                     "modifierKind": [
                         126
@@ -62245,7 +62937,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 166,
+                    "line": 167,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -62263,7 +62955,7 @@
                     "type": "ElementRef<HTMLDivElement>",
                     "optional": false,
                     "description": "",
-                    "line": 162,
+                    "line": 163,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -62289,7 +62981,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 213,
+                    "line": 218,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -62316,7 +63008,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 164,
+                    "line": 165,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -62324,7 +63016,7 @@
                     "name": "class.cds--text-input--fluid",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 172,
+                    "line": 173,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -62332,7 +63024,7 @@
                     "name": "class.cds--text-input--fluid__skeleton",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 176,
+                    "line": 177,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -62341,7 +63033,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 166,
+                    "line": 167,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -62349,7 +63041,7 @@
                     "name": "class.cds--text-input-wrapper--readonly",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 168,
+                    "line": 169,
                     "type": "any",
                     "decorators": []
                 }
@@ -62360,7 +63052,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { InputModule } from &#39;carbon-components-angular&#39;;</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-text-label&gt;\n    Label\n    &lt;input cdsText type=&quot;text&quot; class=&quot;input-field&quot;&gt;\n&lt;/cds-text-label&gt;</code></pre></div><p><a href=\"../../?path=/story/components-input--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { InputModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-text-label>\n\tLabel\n\t<input cdsText type=\"text\" class=\"input-field\">\n</cds-text-label>\n```\n\n[See demo](../../?path=/story/components-input--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tAfterViewInit,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tHostBinding,\n\tInput,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-text-label>\n * \tLabel\n * \t<input cdsText type=\"text\" class=\"input-field\">\n * </cds-text-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-text-label, ibm-text-label\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"skeleton\">\n\t\t\t<span class=\"cds--label cds--skeleton\"></span>\n\t\t\t<div class=\"cds--text-input cds--skeleton\"></div>\n\t\t</ng-container>\n\t\t<label\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--text-input__field-outer-wrapper\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t\t}\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t#wrapper>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"invalid && !warn\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t\t\t\t<ng-template #textInputContent>\n\t\t\t\t\t<ng-content select=\"[cdsText],[ibmText],input[type=text],div\"></ng-content>\n\t\t\t\t</ng-template>\n\n\t\t\t\t<ng-container *ngIf=\"fluid\">\n\t\t\t\t\t<hr class=\"cds--text-input__divider\" />\n\t\t\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t\t<ng-container *ngIf=\"!fluid\">\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</div>\n\t`\n})\nexport class TextInputLabelComponent implements AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-text-input-\" + TextInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textInputTemplate: TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t@HostBinding(\"class.cds--text-input-wrapper\") textInputWrapper = true;\n\n\t@HostBinding(\"class.cds--text-input-wrapper--readonly\") get isReadonly() {\n\t\treturn this.wrapper?.nativeElement.querySelector(\"input\")?.readOnly ?? false;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid\") get fluidClass() {\n\t\treturn this.fluid && !this.skeleton;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeletonClass() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterContentInit,\n\tAfterViewInit,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tHostBinding,\n\tInput,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-text-label>\n * \tLabel\n * \t<input cdsText type=\"text\" class=\"input-field\">\n * </cds-text-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-text-label, ibm-text-label\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"skeleton\">\n\t\t\t<span class=\"cds--label cds--skeleton\"></span>\n\t\t\t<div class=\"cds--text-input cds--skeleton\"></div>\n\t\t</ng-container>\n\t\t<label\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--text-input__field-outer-wrapper\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t\t}\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t#wrapper>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"invalid && !warn\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t\t\t\t<ng-template #textInputContent>\n\t\t\t\t\t<ng-content select=\"[cdsText],[ibmText],input[type=text],div\"></ng-content>\n\t\t\t\t</ng-template>\n\n\t\t\t\t<ng-container *ngIf=\"fluid\">\n\t\t\t\t\t<hr class=\"cds--text-input__divider\" />\n\t\t\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t\t<ng-container *ngIf=\"!fluid\">\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</div>\n\t`\n})\nexport class TextInputLabelComponent implements AfterViewInit, AfterContentInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-text-input-\" + TextInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textInputTemplate: TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t@HostBinding(\"class.cds--text-input-wrapper\") textInputWrapper = true;\n\n\t@HostBinding(\"class.cds--text-input-wrapper--readonly\") get isReadonly() {\n\t\treturn this.wrapper?.nativeElement.querySelector(\"input\")?.readOnly ?? false;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid\") get fluidClass() {\n\t\treturn this.fluid && !this.skeleton;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeletonClass() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tngAfterContentInit() {\n\t\tthis.changeDetectorRef.detectChanges();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -62377,7 +63069,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 178,
+                "line": 179,
                 "rawdescription": "\n\nCreates an instance of Label.\n",
                 "jsdoctags": [
                     {
@@ -62393,7 +63085,8 @@
             },
             "extends": [],
             "implements": [
-                "AfterViewInit"
+                "AfterViewInit",
+                "AfterContentInit"
             ],
             "accessors": {
                 "isReadonly": {
@@ -62402,7 +63095,7 @@
                         "name": "isReadonly",
                         "type": "",
                         "returnType": "",
-                        "line": 168
+                        "line": 169
                     }
                 },
                 "fluidClass": {
@@ -62411,7 +63104,7 @@
                         "name": "fluidClass",
                         "type": "",
                         "returnType": "",
-                        "line": 172
+                        "line": 173
                     }
                 },
                 "fluidSkeletonClass": {
@@ -62420,7 +63113,7 @@
                         "name": "fluidSkeletonClass",
                         "type": "",
                         "returnType": "",
-                        "line": 176
+                        "line": 177
                     }
                 }
             }
@@ -71962,13 +72655,13 @@
         },
         {
             "name": "TagModule",
-            "id": "module-TagModule-c290f8b002297d858541d2169824e0cea5fa3ca674d892c90222206c9af83bd591d7be4f181ae21c66ca7b5decb57c6489677a58d5d3212a0c096a5410b99392",
+            "id": "module-TagModule-a12f7c1beadebb1231cfa39b78a4a3e27ac65cca69d8fec86df62e6c1ce237b841727ba69c33192f2692cd8259c9173a8b83c311a29bc821e3b0c2351ba75fa8",
             "description": "",
             "deprecationMessage": "",
             "deprecated": false,
             "file": "src/tag/tag.module.ts",
             "methods": [],
-            "sourceCode": "import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { Tag } from \"./tag.component\";\nimport { TagFilter } from \"./tag-filter.component\";\nimport { IconModule } from \"carbon-components-angular/icon\";\n\n@NgModule({\n\tdeclarations: [ Tag, TagFilter ],\n\texports: [ Tag, TagFilter ],\n\timports: [ CommonModule, IconModule ]\n})\nexport class TagModule { }\n",
+            "sourceCode": "import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { Tag } from \"./tag.component\";\nimport { TagFilter } from \"./tag-filter.component\";\nimport { IconModule } from \"carbon-components-angular/icon\";\nimport { TagIconDirective } from \"./tag-icon.directive\";\nimport { TagSelectableComponent } from \"./tag-selectable.component\";\nimport { TagOperationalComponent } from \"./tag-operational.component\";\n\n@NgModule({\n\tdeclarations: [\n\t\tTag,\n\t\tTagFilter,\n\t\tTagIconDirective,\n\t\tTagSelectableComponent,\n\t\tTagOperationalComponent\n\t],\n\texports: [\n\t\tTag,\n\t\tTagFilter,\n\t\tTagIconDirective,\n\t\tTagSelectableComponent,\n\t\tTagOperationalComponent\n\t],\n\timports: [CommonModule, IconModule]\n})\nexport class TagModule {}\n",
             "children": [
                 {
                     "type": "providers",
@@ -71982,6 +72675,15 @@
                         },
                         {
                             "name": "TagFilter"
+                        },
+                        {
+                            "name": "TagIconDirective"
+                        },
+                        {
+                            "name": "TagOperationalComponent"
+                        },
+                        {
+                            "name": "TagSelectableComponent"
                         }
                     ]
                 },
@@ -72001,6 +72703,15 @@
                         },
                         {
                             "name": "TagFilter"
+                        },
+                        {
+                            "name": "TagIconDirective"
+                        },
+                        {
+                            "name": "TagOperationalComponent"
+                        },
+                        {
+                            "name": "TagSelectableComponent"
                         }
                     ]
                 },
@@ -73748,7 +74459,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-filter\n\t\t\t[type]=\"type\"\n\t\t\t[size]=\"size\"\n\t\t\ttitle=\"Filter\"\n\t\t\tcloseButtonLabel=\"Clear\">\n\t\t\tfilter\n\t\t</cds-tag-filter>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-filter\n\t\t\t[type]=\"type\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\ttitle=\"Filter\"\n\t\t\tcloseButtonLabel=\"Clear\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tFiltered\n\t\t</cds-tag-filter>\n\t`\n})"
             },
             {
                 "name": "Filtering",
@@ -74646,6 +75357,26 @@
                 "type": "",
                 "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div\n\t\t\tcdsGrid\n\t\t\t[condensed]=\"condensed\"\n\t\t\t[fullWidth]=\"fullWidth\"\n\t\t\t[narrow]=\"narrow\">\n\t\t\t<div cdsRow>\n\t\t\t\t<div cdsCol class=\"custom-class-example\" [columnNumbers]=\"{sm: 1}\" [offsets]=\"{sm: 3}\">\n\t\t\t\t\t<div class=\"inside\">Small: Offset 3</div>\n\t\t\t\t</div>\n\t\t\t\t<div cdsCol class=\"custom-class-example\" [columnNumbers]=\"{sm: 2}\" [offsets]=\"{sm: 2}\">\n\t\t\t\t\t<div class=\"inside\">Small: Offset 2</div>\n\t\t\t\t</div>\n\t\t\t\t<div cdsCol class=\"custom-class-example\" [columnNumbers]=\"{sm: 3}\" [offsets]=\"{sm: 1}\">\n\t\t\t\t\t<div class=\"inside\">Small: Offset 1</div>\n\t\t\t\t</div>\n\t\t\t\t<div cdsCol class=\"custom-class-example\" [columnNumbers]=\"{sm: 4}\" [offsets]=\"{sm: 0}\">\n\t\t\t\t\t<div class=\"inside\">Small: Offset -</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t`\n})"
             },
+            {
+                "name": "OperationalTag",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/tag/tag.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "OperationalTagTemplate.bind({})"
+            },
+            {
+                "name": "OperationalTagTemplate",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/tag/tag.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-operational\n\t\t\ttype=\"cyan\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tOperational\n\t\t</cds-tag-operational>\n\n\n\t\t<div\n\t\t\tcdsPopover\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[highContrast]=\"true\">\n\t\t\t<cds-tag-operational\n\t\t\t\t[type]=\"type\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t(click)=\"isOpen = !isOpen\">\n\t\t\t\t<div cdsTagIcon>\n\t\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t\t</div>\n\t\t\t\tOperational w/ popover\n\t\t\t</cds-tag-operational>\n\t\t\t<cds-popover-content>\n\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\tTag 1 name <br>\n\t\t\t\t\tTag 2 name <br>\n\t\t\t\t\tTag 3 name <br>\n\t\t\t\t\tTag 4 name <br>\n\t\t\t\t\t<cds-tag type=\"green\">Tag 5 name</cds-tag>\n\t\t\t\t</div>\n\t\t\t</cds-popover-content>\n\t\t</div>\n\t`,\n\tstyles: [\n\t\t`.popover-content {\n\t\t\tline-height: 1.5;\n\t\t\tpadding: 1rem;\n\t\t\tfont-size: 14px;\n\t\t}`\n\t]\n})"
+            },
             {
                 "name": "OptionsSelected",
                 "ctype": "miscellaneous",
@@ -75011,6 +75742,26 @@
                 "type": "",
                 "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tile-group (selected)=\"selected($event)\" [multiple]=\"false\">\n\t\t\t<cds-selection-tile value=\"tile1\" [selected]=\"true\">Selectable Tile</cds-selection-tile>\n\t\t\t<cds-selection-tile value=\"tile2\">Selectable Tile</cds-selection-tile>\n\t\t\t<cds-selection-tile value=\"tile3\">Selectable Tile</cds-selection-tile>\n\t\t</cds-tile-group>\n\t`\n})"
             },
+            {
+                "name": "SelectedTag",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/tag/tag.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "SelectedTagTemplate.bind({})"
+            },
+            {
+                "name": "SelectedTagTemplate",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/tag/tag.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-selectable\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[selected]=\"selected\"\n\t\t\t(selectedChange)=\"selectedChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tSelectable\n\t\t</cds-tag-selectable>\n\t`\n})"
+            },
             {
                 "name": "Selection",
                 "ctype": "miscellaneous",
@@ -75929,7 +76680,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag [type]=\"type\" [size]=\"size\">Tag</cds-tag>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag\n\t\t\t[type]=\"type\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tRead only\n\t\t</cds-tag>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -81705,7 +82456,47 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-filter\n\t\t\t[type]=\"type\"\n\t\t\t[size]=\"size\"\n\t\t\ttitle=\"Filter\"\n\t\t\tcloseButtonLabel=\"Clear\">\n\t\t\tfilter\n\t\t</cds-tag-filter>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-filter\n\t\t\t[type]=\"type\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\ttitle=\"Filter\"\n\t\t\tcloseButtonLabel=\"Clear\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tFiltered\n\t\t</cds-tag-filter>\n\t`\n})"
+                },
+                {
+                    "name": "OperationalTag",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tag/tag.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "OperationalTagTemplate.bind({})"
+                },
+                {
+                    "name": "OperationalTagTemplate",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tag/tag.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-operational\n\t\t\ttype=\"cyan\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tOperational\n\t\t</cds-tag-operational>\n\n\n\t\t<div\n\t\t\tcdsPopover\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[highContrast]=\"true\">\n\t\t\t<cds-tag-operational\n\t\t\t\t[type]=\"type\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t(click)=\"isOpen = !isOpen\">\n\t\t\t\t<div cdsTagIcon>\n\t\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t\t</div>\n\t\t\t\tOperational w/ popover\n\t\t\t</cds-tag-operational>\n\t\t\t<cds-popover-content>\n\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\tTag 1 name <br>\n\t\t\t\t\tTag 2 name <br>\n\t\t\t\t\tTag 3 name <br>\n\t\t\t\t\tTag 4 name <br>\n\t\t\t\t\t<cds-tag type=\"green\">Tag 5 name</cds-tag>\n\t\t\t\t</div>\n\t\t\t</cds-popover-content>\n\t\t</div>\n\t`,\n\tstyles: [\n\t\t`.popover-content {\n\t\t\tline-height: 1.5;\n\t\t\tpadding: 1rem;\n\t\t\tfont-size: 14px;\n\t\t}`\n\t]\n})"
+                },
+                {
+                    "name": "SelectedTag",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tag/tag.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "SelectedTagTemplate.bind({})"
+                },
+                {
+                    "name": "SelectedTagTemplate",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tag/tag.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-selectable\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[selected]=\"selected\"\n\t\t\t(selectedChange)=\"selectedChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tSelectable\n\t\t</cds-tag-selectable>\n\t`\n})"
                 },
                 {
                     "name": "Template",
@@ -81715,7 +82506,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag [type]=\"type\" [size]=\"size\">Tag</cds-tag>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag\n\t\t\t[type]=\"type\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tRead only\n\t\t</cds-tag>\n\t`\n})"
                 }
             ],
             "src/theme/theme.stories.ts": [
@@ -89807,18 +90598,45 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "TagFilter",
-                "coveragePercent": 30,
-                "coverageCount": "4/13",
+                "coveragePercent": 28,
+                "coverageCount": "4/14",
                 "status": "medium"
             },
+            {
+                "filePath": "src/tag/tag-icon.directive.ts",
+                "type": "directive",
+                "linktype": "directive",
+                "name": "TagIconDirective",
+                "coveragePercent": 0,
+                "coverageCount": "0/3",
+                "status": "low"
+            },
+            {
+                "filePath": "src/tag/tag-operational.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "TagOperationalComponent",
+                "coveragePercent": 15,
+                "coverageCount": "2/13",
+                "status": "low"
+            },
+            {
+                "filePath": "src/tag/tag-selectable.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "TagSelectableComponent",
+                "coveragePercent": 0,
+                "coverageCount": "0/17",
+                "status": "low"
+            },
             {
                 "filePath": "src/tag/tag.component.ts",
                 "type": "component",
                 "linktype": "component",
                 "name": "Tag",
-                "coveragePercent": 60,
-                "coverageCount": "3/5",
-                "status": "good"
+                "coveragePercent": 50,
+                "coverageCount": "3/6",
+                "status": "medium"
             },
             {
                 "filePath": "src/tag/tag.stories.ts",
@@ -89850,6 +90668,46 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/tag/tag.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "OperationalTag",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/tag/tag.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "OperationalTagTemplate",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/tag/tag.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "SelectedTag",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/tag/tag.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "SelectedTagTemplate",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/tag/tag.stories.ts",
                 "type": "variable",