npm - carbon-components-angular - Versions diffs - 5.53.0 → 5.54.0 - Mend

carbon-components-angular 5.53.0 → 5.54.0

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

Files changed (210) hide show

package/docs/documentation.json CHANGED Viewed

@@ -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"
+                            }
+                        ]
                     }
                 }
             }
@@ -64570,7 +65262,7 @@
         },
         {
             "name": "Toggle",
-            "id": "component-Toggle-630556cb1912c46e615e8220bc9e3bda9fe05619dd4477bf6b06fcba589ef78f8bf4ba33458b21bbaddff3ca38e60dab6272159be15b648e4cb45cbf7bc47686",
+            "id": "component-Toggle-d995b80181399528e11b176c60b3306776c03e4548c63b010966add22c0027cf072b43d319555b9e055ab0f3252a63888fa3789470590c335e696af90c318fab",
             "file": "src/toggle/toggle.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -64584,11 +65276,24 @@
             "selector": "cds-toggle, ibm-toggle",
             "styleUrls": [],
             "styles": [],
-            "template": "<ng-container *ngIf=\"!skeleton; else skeletonTemplate;\">\n\t<button\n\t\tclass=\"cds--toggle__button\"\n\t\t[disabled]=\"disabled\"\n\t\t[id]=\"id\"\n\t\trole=\"switch\"\n\t\ttype=\"button\"\n\t\t[attr.aria-checked]=\"checked\"\n\t\t(click)=\"onClick($event)\">\n\t</button>\n\t<label\n\t\tclass=\"cds--toggle__label\"\n\t\t[for]=\"id\">\n\t\t<span\n\t\t\tclass=\"cds--toggle__label-text\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</span>\n\t\t<div\n\t\t\tclass=\"cds--toggle__appearance\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--toggle__appearance--sm': size === 'sm'\n\t\t\t}\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--toggle__switch\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--toggle__switch--checked': checked\n\t\t\t\t}\">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"size === 'sm'\"\n\t\t\t\t\tclass='cds--toggle__check'\n\t\t\t\t\twidth=\"6px\"\n\t\t\t\t\theight=\"5px\"\n\t\t\t\t\tviewBox=\"0 0 6 5\">\n\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span class=\"cds--toggle__text\">\n\t\t\t\t{{(hideLabel ? label : (getCheckedText() | async))}}\n\t\t\t</span>\n\t\t</div>\n\t</label>\n</ng-container>\n<ng-template #skeletonTemplate>\n\t<div class=\"cds--toggle__skeleton-circle\"></div>\n\t<div class=\"cds--toggle__skeleton-rectangle\"></div>\n</ng-template>\n\t",
+            "template": "<ng-container *ngIf=\"!skeleton; else skeletonTemplate;\">\n\t<button\n\t\tclass=\"cds--toggle__button\"\n\t\t[disabled]=\"disabled\"\n\t\t[id]=\"id\"\n\t\trole=\"switch\"\n\t\ttype=\"button\"\n\t\t[attr.aria-checked]=\"checked\"\n\t\t(click)=\"onClick($event)\"\n\t\t[attr.aria-label]=\"ariaLabel\">\n\t</button>\n\t<label\n\t\tclass=\"cds--toggle__label\"\n\t\t[for]=\"id\">\n\t\t<span\n\t\t\tclass=\"cds--toggle__label-text\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</span>\n\t\t<div\n\t\t\tclass=\"cds--toggle__appearance\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--toggle__appearance--sm': size === 'sm'\n\t\t\t}\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--toggle__switch\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--toggle__switch--checked': checked\n\t\t\t\t}\">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"size === 'sm'\"\n\t\t\t\t\tclass='cds--toggle__check'\n\t\t\t\t\twidth=\"6px\"\n\t\t\t\t\theight=\"5px\"\n\t\t\t\t\tviewBox=\"0 0 6 5\">\n\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span class=\"cds--toggle__text\">\n\t\t\t\t{{(hideLabel ? label : (getCheckedText() | async))}}\n\t\t\t</span>\n\t\t</div>\n\t</label>\n</ng-container>\n<ng-template #skeletonTemplate>\n\t<div class=\"cds--toggle__skeleton-circle\"></div>\n\t<div class=\"cds--toggle__skeleton-rectangle\"></div>\n</ng-template>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
             "inputsClass": [
+                {
+                    "name": "ariaLabel",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nSet `aria-label` property for the button when label is empty\n",
+                    "description": "<p>Set <code>aria-label</code> property for the button when label is empty</p>\n",
+                    "line": 151,
+                    "type": "string",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "Checkbox"
+                    }
+                },
                 {
                     "name": "hideLabel",
                     "defaultValue": "false",
@@ -64596,7 +65301,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to hide the toggle label & set toggle on/off text to label.\n",
                     "description": "<p>Set to <code>true</code> to hide the toggle label &amp; set toggle on/off text to label.</p>\n",
-                    "line": 144,
+                    "line": 146,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -64609,7 +65314,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nText that is set as the label of the toggle.\n",
                     "description": "<p>Text that is set as the label of the toggle.</p>\n",
-                    "line": 136,
+                    "line": 138,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -64619,7 +65324,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nText that is set on the left side of the toggle.\n",
                     "description": "<p>Text that is set on the left side of the toggle.</p>\n",
-                    "line": 114,
+                    "line": 116,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -64629,7 +65334,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nText that is set on the right side of the toggle.\n",
                     "description": "<p>Text that is set on the right side of the toggle.</p>\n",
-                    "line": 126,
+                    "line": 128,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -64640,7 +65345,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSize of the toggle component.\n",
                     "description": "<p>Size of the toggle component.</p>\n",
-                    "line": 140,
+                    "line": 142,
                     "type": "\"sm\" | \"md\"",
                     "decorators": []
                 },
@@ -64649,24 +65354,13 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 146,
+                    "line": 153,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
                         "file": "Checkbox"
                     }
                 },
-                {
-                    "name": "ariaLabel",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 108,
-                    "type": "string",
-                    "decorators": [],
-                    "inheritance": {
-                        "file": "Checkbox"
-                    }
-                },
                 {
                     "name": "ariaLabelledby",
                     "deprecated": false,
@@ -64822,7 +65516,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>The unique id allocated to the <code>Toggle</code>.</p>\n",
-                    "line": 160,
+                    "line": 167,
                     "rawdescription": "\n\nThe unique id allocated to the `Toggle`.\n"
                 },
                 {
@@ -64833,7 +65527,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 148,
+                    "line": 155,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -64852,7 +65546,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Variable used for creating unique ids for toggle components.</p>\n",
-                    "line": 108,
+                    "line": 110,
                     "rawdescription": "\n\nVariable used for creating unique ids for toggle components.\n",
                     "modifierKind": [
                         126
@@ -64975,7 +65669,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 201,
+                    "line": 208,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates instance of `ToggleChange` used to propagate the change event.\n",
@@ -64990,7 +65684,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 191,
+                    "line": 198,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -65000,7 +65694,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 183,
+                    "line": 190,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -65010,7 +65704,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 187,
+                    "line": 194,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -65027,7 +65721,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 206,
+                    "line": 213,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -65058,7 +65752,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 179,
+                    "line": 186,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the toggle input.\n\nex: `this.formGroup.get(\"myToggle\").disable();`\n\n",
@@ -65066,8 +65760,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 4208,
-                                "end": 4218,
+                                "pos": 4385,
+                                "end": 4395,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -65078,8 +65772,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 4202,
-                                "end": 4207,
+                                "pos": 4379,
+                                "end": 4384,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -65378,7 +66072,7 @@
                     "name": "class.cds--form-item",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 153,
+                    "line": 160,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -65387,7 +66081,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 148,
+                    "line": 155,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -65395,7 +66089,7 @@
                     "name": "class.cds--toggle--disabled",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 149,
+                    "line": 156,
                     "type": "any",
                     "decorators": []
                 }
@@ -65418,7 +66112,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ToggleModule } from &#39;carbon-components-angular&#39;;</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-toggle [(ngModel)]=&quot;toggleState&quot;&gt;Toggle&lt;/cds-toggle&gt;</code></pre></div><p><a href=\"../../?path=/story/components-toggle--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ToggleModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-toggle [(ngModel)]=\"toggleState\">Toggle</cds-toggle>\n```\n\n[See demo](../../?path=/story/components-toggle--basic)\n",
             "type": "component",
-            "sourceCode": "import { Checkbox } from \"carbon-components-angular/checkbox\";\nimport {\n\tChangeDetectorRef,\n\tComponent,\n\tInput,\n\tHostBinding,\n\tTemplateRef\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Defines the set of states for a toggle component.\n */\nexport enum ToggleState {\n\tInit,\n\tChecked,\n\tUnchecked\n}\n\n/**\n * @todo - Toggle component will no longer extend `Checkbox` component as of v6\n * Toggle is no longer repies on using checkbox, so doesn't make sense for us to continue inheriting ALL checkbox\n * component attributes.\n */\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ToggleModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-toggle [(ngModel)]=\"toggleState\">Toggle</cds-toggle>\n * ```\n *\n * [See demo](../../?path=/story/components-toggle--basic)\n */\n@Component({\n\tselector: \"cds-toggle, ibm-toggle\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate;\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--toggle__button\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\trole=\"switch\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.aria-checked]=\"checked\"\n\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t</button>\n\t\t\t<label\n\t\t\t\tclass=\"cds--toggle__label\"\n\t\t\t\t[for]=\"id\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--toggle__label-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</span>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--toggle__appearance\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--toggle__appearance--sm': size === 'sm'\n\t\t\t\t\t}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"cds--toggle__switch\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--toggle__switch--checked': checked\n\t\t\t\t\t\t}\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf=\"size === 'sm'\"\n\t\t\t\t\t\t\tclass='cds--toggle__check'\n\t\t\t\t\t\t\twidth=\"6px\"\n\t\t\t\t\t\t\theight=\"5px\"\n\t\t\t\t\t\t\tviewBox=\"0 0 6 5\">\n\t\t\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"cds--toggle__text\">\n\t\t\t\t\t\t{{(hideLabel ? label : (getCheckedText() | async))}}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t</ng-container>\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"cds--toggle__skeleton-circle\"></div>\n\t\t\t<div class=\"cds--toggle__skeleton-rectangle\"></div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Toggle,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Toggle extends Checkbox {\n\t/**\n\t * Variable used for creating unique ids for toggle components.\n\t */\n\tstatic toggleCount = 0;\n\n\t/**\n\t * Text that is set on the left side of the toggle.\n\t */\n\t@Input()\n\tset offText(value: string | Observable<string>) {\n\t\tthis._offValues.override(value);\n\t}\n\n\tget offText() {\n\t\treturn this._offValues.value;\n\t}\n\n\t/**\n\t * Text that is set on the right side of the toggle.\n\t */\n\t@Input()\n\tset onText(value: string | Observable<string>) {\n\t\tthis._onValues.override(value);\n\t}\n\n\tget onText() {\n\t\treturn this._onValues.value;\n\t}\n\t/**\n\t * Text that is set as the label of the toggle.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Size of the toggle component.\n\t */\n\t@Input() size: \"sm\" | \"md\" = \"md\";\n\t/**\n\t * Set to `true` to hide the toggle label & set toggle on/off text to label.\n\t */\n\t@Input() hideLabel = false;\n\n\t@HostBinding(\"class.cds--toggle--skeleton\") @Input() skeleton = false;\n\n\t@HostBinding(\"class.cds--toggle\") toggleClass = true;\n\t@HostBinding(\"class.cds--toggle--disabled\") get disabledClass () {\n\t\treturn this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--form-item\") get formItem() {\n\t\treturn !this.skeleton;\n\t}\n\n\t/**\n\t * The unique id allocated to the `Toggle`.\n\t */\n\tid = \"toggle-\" + Toggle.toggleCount;\n\n\tprotected _offValues = this.i18n.getOverridable(\"TOGGLE.OFF\");\n\tprotected _onValues = this.i18n.getOverridable(\"TOGGLE.ON\");\n\t/**\n\t * Creates an instance of Toggle.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef, protected i18n: I18n) {\n\t\tsuper(changeDetectorRef);\n\t\tToggle.toggleCount++;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the toggle input.\n\t *\n\t * ex: `this.formGroup.get(\"myToggle\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the input\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tgetOffText(): Observable<string> {\n\t\treturn this._offValues.subject;\n\t}\n\n\tgetOnText(): Observable<string> {\n\t\treturn this._onValues.subject;\n\t}\n\n\tgetCheckedText(): Observable<string> {\n\t\tif (this.checked) {\n\t\t\treturn this._onValues.subject;\n\t\t}\n\t\treturn this._offValues.subject;\n\t}\n\n\t/**\n\t * Creates instance of `ToggleChange` used to propagate the change event.\n\t */\n\temitChangeEvent() {\n\t\tthis.checkedChange.emit(this.checked);\n\t\tthis.propagateChange(this.checked);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import { Checkbox } from \"carbon-components-angular/checkbox\";\nimport {\n\tChangeDetectorRef,\n\tComponent,\n\tInput,\n\tHostBinding,\n\tTemplateRef\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * @deprecated since v5 - Use boolean\n * Defines the set of states for a toggle component.\n */\nexport enum ToggleState {\n\tInit,\n\tChecked,\n\tUnchecked\n}\n\n/**\n * @todo - Toggle component will no longer extend `Checkbox` component as of v6\n * Toggle is no longer repies on using checkbox, so doesn't make sense for us to continue inheriting ALL checkbox\n * component attributes.\n */\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ToggleModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-toggle [(ngModel)]=\"toggleState\">Toggle</cds-toggle>\n * ```\n *\n * [See demo](../../?path=/story/components-toggle--basic)\n */\n@Component({\n\tselector: \"cds-toggle, ibm-toggle\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate;\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--toggle__button\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\trole=\"switch\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.aria-checked]=\"checked\"\n\t\t\t\t(click)=\"onClick($event)\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\">\n\t\t\t</button>\n\t\t\t<label\n\t\t\t\tclass=\"cds--toggle__label\"\n\t\t\t\t[for]=\"id\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--toggle__label-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</span>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--toggle__appearance\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--toggle__appearance--sm': size === 'sm'\n\t\t\t\t\t}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"cds--toggle__switch\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--toggle__switch--checked': checked\n\t\t\t\t\t\t}\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf=\"size === 'sm'\"\n\t\t\t\t\t\t\tclass='cds--toggle__check'\n\t\t\t\t\t\t\twidth=\"6px\"\n\t\t\t\t\t\t\theight=\"5px\"\n\t\t\t\t\t\t\tviewBox=\"0 0 6 5\">\n\t\t\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"cds--toggle__text\">\n\t\t\t\t\t\t{{(hideLabel ? label : (getCheckedText() | async))}}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t</ng-container>\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"cds--toggle__skeleton-circle\"></div>\n\t\t\t<div class=\"cds--toggle__skeleton-rectangle\"></div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Toggle,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Toggle extends Checkbox {\n\t/**\n\t * Variable used for creating unique ids for toggle components.\n\t */\n\tstatic toggleCount = 0;\n\n\t/**\n\t * Text that is set on the left side of the toggle.\n\t */\n\t@Input()\n\tset offText(value: string | Observable<string>) {\n\t\tthis._offValues.override(value);\n\t}\n\n\tget offText() {\n\t\treturn this._offValues.value;\n\t}\n\n\t/**\n\t * Text that is set on the right side of the toggle.\n\t */\n\t@Input()\n\tset onText(value: string | Observable<string>) {\n\t\tthis._onValues.override(value);\n\t}\n\n\tget onText() {\n\t\treturn this._onValues.value;\n\t}\n\t/**\n\t * Text that is set as the label of the toggle.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Size of the toggle component.\n\t */\n\t@Input() size: \"sm\" | \"md\" = \"md\";\n\t/**\n\t * Set to `true` to hide the toggle label & set toggle on/off text to label.\n\t */\n\t@Input() hideLabel = false;\n\n\t/**\n\t * Set `aria-label` property for the button when label is empty\n\t */\n\t@Input() ariaLabel: string;\n\n\t@HostBinding(\"class.cds--toggle--skeleton\") @Input() skeleton = false;\n\n\t@HostBinding(\"class.cds--toggle\") toggleClass = true;\n\t@HostBinding(\"class.cds--toggle--disabled\") get disabledClass () {\n\t\treturn this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--form-item\") get formItem() {\n\t\treturn !this.skeleton;\n\t}\n\n\t/**\n\t * The unique id allocated to the `Toggle`.\n\t */\n\tid = \"toggle-\" + Toggle.toggleCount;\n\n\tprotected _offValues = this.i18n.getOverridable(\"TOGGLE.OFF\");\n\tprotected _onValues = this.i18n.getOverridable(\"TOGGLE.ON\");\n\t/**\n\t * Creates an instance of Toggle.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef, protected i18n: I18n) {\n\t\tsuper(changeDetectorRef);\n\t\tToggle.toggleCount++;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the toggle input.\n\t *\n\t * ex: `this.formGroup.get(\"myToggle\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the input\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tgetOffText(): Observable<string> {\n\t\treturn this._offValues.subject;\n\t}\n\n\tgetOnText(): Observable<string> {\n\t\treturn this._onValues.subject;\n\t}\n\n\tgetCheckedText(): Observable<string> {\n\t\tif (this.checked) {\n\t\t\treturn this._onValues.subject;\n\t\t}\n\t\treturn this._offValues.subject;\n\t}\n\n\t/**\n\t * Creates instance of `ToggleChange` used to propagate the change event.\n\t */\n\temitChangeEvent() {\n\t\tthis.checkedChange.emit(this.checked);\n\t\tthis.propagateChange(this.checked);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -65441,7 +66135,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 163,
+                "line": 170,
                 "rawdescription": "\n\nCreates an instance of Toggle.\n",
                 "jsdoctags": [
                     {
@@ -65484,7 +66178,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 114,
+                        "line": 116,
                         "rawdescription": "\n\nText that is set on the left side of the toggle.\n",
                         "description": "<p>Text that is set on the left side of the toggle.</p>\n",
                         "jsdoctags": [
@@ -65503,7 +66197,7 @@
                         "name": "offText",
                         "type": "",
                         "returnType": "",
-                        "line": 118
+                        "line": 120
                     }
                 },
                 "onText": {
@@ -65522,7 +66216,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 126,
+                        "line": 128,
                         "rawdescription": "\n\nText that is set on the right side of the toggle.\n",
                         "description": "<p>Text that is set on the right side of the toggle.</p>\n",
                         "jsdoctags": [
@@ -65541,7 +66235,7 @@
                         "name": "onText",
                         "type": "",
                         "returnType": "",
-                        "line": 130
+                        "line": 132
                     }
                 },
                 "disabledClass": {
@@ -65550,7 +66244,7 @@
                         "name": "disabledClass",
                         "type": "",
                         "returnType": "",
-                        "line": 149
+                        "line": 156
                     }
                 },
                 "formItem": {
@@ -65559,7 +66253,7 @@
                         "name": "formItem",
                         "type": "",
                         "returnType": "",
-                        "line": 153
+                        "line": 160
                     }
                 }
             }
@@ -71960,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",
@@ -71980,6 +72674,15 @@
                         },
                         {
                             "name": "TagFilter"
+                        },
+                        {
+                            "name": "TagIconDirective"
+                        },
+                        {
+                            "name": "TagOperationalComponent"
+                        },
+                        {
+                            "name": "TagSelectableComponent"
                         }
                     ]
                 },
@@ -71999,6 +72702,15 @@
                         },
                         {
                             "name": "TagFilter"
+                        },
+                        {
+                            "name": "TagIconDirective"
+                        },
+                        {
+                            "name": "TagOperationalComponent"
+                        },
+                        {
+                            "name": "TagSelectableComponent"
                         }
                     ]
                 },
@@ -73746,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",
@@ -74644,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",
@@ -75009,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",
@@ -75927,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",
@@ -78372,9 +79124,9 @@
                 ],
                 "ctype": "miscellaneous",
                 "subtype": "enum",
-                "deprecated": false,
-                "deprecationMessage": "",
-                "description": "<p>Defines the set of states for a toggle component.</p>\n",
+                "deprecated": true,
+                "deprecationMessage": "since v5 - Use boolean\nDefines the set of states for a toggle component.",
+                "description": "",
                 "file": "src/toggle/toggle.component.ts"
             }
         ],
@@ -81703,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",
@@ -81713,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": [
@@ -84202,9 +84994,9 @@
                     ],
                     "ctype": "miscellaneous",
                     "subtype": "enum",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "description": "<p>Defines the set of states for a toggle component.</p>\n",
+                    "deprecated": true,
+                    "deprecationMessage": "since v5 - Use boolean\nDefines the set of states for a toggle component.",
+                    "description": "",
                     "file": "src/toggle/toggle.component.ts"
                 }
             ]
@@ -89805,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",
@@ -89848,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",
@@ -90300,8 +91159,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "Toggle",
-                "coveragePercent": 72,
-                "coverageCount": "35/48",
+                "coveragePercent": 75,
+                "coverageCount": "36/48",
                 "status": "good"
             },
             {