carbon-components-angular 5.53.1 → 5.54.0

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"
+                            }
+                        ]
                     }
                 }
             }
@@ -71962,13 +72654,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 +72674,15 @@
                         },
                         {
                             "name": "TagFilter"
+                        },
+                        {
+                            "name": "TagIconDirective"
+                        },
+                        {
+                            "name": "TagOperationalComponent"
+                        },
+                        {
+                            "name": "TagSelectableComponent"
                         }
                     ]
                 },
@@ -72001,6 +72702,15 @@
                         },
                         {
                             "name": "TagFilter"
+                        },
+                        {
+                            "name": "TagIconDirective"
+                        },
+                        {
+                            "name": "TagOperationalComponent"
+                        },
+                        {
+                            "name": "TagSelectableComponent"
                         }
                     ]
                 },
@@ -73748,7 +74458,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 +75356,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 +75741,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 +76679,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 +82455,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 +82505,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 +90597,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 +90667,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",